1. 引言为什么 Chrome 插件Extension值得学习插件能做什么效率工具、网页增强、数据采集、自动化操作本文面向的读者有一定 HTML/CSS/JS 基础的前端开发者阅读本文你将收获什么2. 环境准备与项目初始化安装 Chrome 浏览器与开发者模式开启Manifest 版本说明Manifest V3 与 V2 的差异创建第一个最小插件项目目录结构规范manifest.json、background、content、popup、icons3. Manifest 配置文件详解manifest.json 核心字段name、version、description、manifest_versionpermissions 权限声明与最小权限原则host_permissions 与 content_scripts 的匹配规则action 与 popup 页面配置icons 图标规范与尺寸要求4. 核心组件Content Scripts 内容脚本content_scripts 的作用与注入时机操作页面 DOM 的实战示例与页面共享 DOM 但隔离 JS 环境的原理通过消息通信与插件其他部分交互5. 核心组件Background Service WorkerMV3 中 Service Worker 替代 Background Page生命周期与事件驱动模型监听浏览器事件点击图标、标签页切换、网络请求使用 chrome.scripting 动态注入脚本6. 消息通信机制chrome.runtime.sendMessage 与 onMessage三种通信场景popup→content、content→background、页面→插件异步回调与 Promise 化处理长连接 Port 的使用场景7. Popup 弹窗页面开发popup.html 的界面搭建与 content script 通信实现页面操作保存用户配置到 chrome.storage常见交互模式开关、表单、列表展示8. 数据存储chrome.storagestorage.local 与 storage.sync 的区别存储数据的读写与监听变化存储配额与性能注意事项实战保存用户自定义配置9. 实战案例一网页内容采集助手需求分析与功能拆解实现选中文本的快捷采集数据整理与导出复制/下载完整代码演示与讲解10. 实战案例二页面增强工具需求场景自动填充、快捷键操作、样式定制结合 content script 与 background 实现用户配置界面开发完整代码演示与讲解11. 调试与发布开发者模式下的加载与调试技巧使用 chrome://extensions 查看错误日志打包 CRX 文件上架 Chrome 应用商店的流程与审核注意事项12. 总结与进阶方向本文核心知识点回顾常见踩坑点汇总进阶方向权限管理、国际化、自动化测试推荐学习资源与官方文档
