1. 引言

• 为什么 Chrome 插件（Extension）值得学习
• 插件能做什么：效率工具、网页增强、数据采集、自动化操作
• 本文面向的读者：有一定 HTML/CSS/JS 基础的前端开发者
• 阅读本文你将收获什么

2. 环境准备与项目初始化

• 安装 Chrome 浏览器与开发者模式开启
• Manifest 版本说明（Manifest V3 与 V2 的差异）
• 创建第一个最小插件项目
• 目录结构规范：manifest.json、background、content、popup、icons

3. Manifest 配置文件详解

• manifest.json 核心字段：name、version、description、manifest_version
• permissions 权限声明与最小权限原则
• host_permissions 与 content_scripts 的匹配规则
• action 与 popup 页面配置
• icons 图标规范与尺寸要求

4. 核心组件：Content Scripts 内容脚本

• content_scripts 的作用与注入时机
• 操作页面 DOM 的实战示例
• 与页面共享 DOM 但隔离 JS 环境的原理
• 通过消息通信与插件其他部分交互

5. 核心组件：Background Service Worker

• MV3 中 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.storage

• storage.local 与 storage.sync 的区别
• 存储数据的读写与监听变化
• 存储配额与性能注意事项
• 实战：保存用户自定义配置

9. 实战案例一：网页内容采集助手

• 需求分析与功能拆解
• 实现选中文本的快捷采集
• 数据整理与导出（复制/下载）
• 完整代码演示与讲解

10. 实战案例二：页面增强工具

• 需求场景：自动填充、快捷键操作、样式定制
• 结合 content script 与 background 实现
• 用户配置界面开发
• 完整代码演示与讲解

11. 调试与发布

• 开发者模式下的加载与调试技巧
• 使用 chrome://extensions 查看错误日志
• 打包 CRX 文件
• 上架 Chrome 应用商店的流程与审核注意事项

12. 总结与进阶方向

• 本文核心知识点回顾
• 常见踩坑点汇总
• 进阶方向：权限管理、国际化、自动化测试
• 推荐学习资源与官方文档