Chrome 扩展开发完全指南
Chrome 扩展开发完全指南
从零开始，系统掌握 Chrome 扩展开发的全部知识——涵盖架构设计、核心 API、安全策略、发布运维与工程化实践。
为什么学习 Chrome 扩展开发？
Chrome 浏览器拥有全球超过 65% 的市场份额，其扩展生态（Chrome Extension Ecosystem）是触达用户的最佳途径之一。通过扩展，你可以：
- 增强浏览体验：广告拦截、密码管理、翻译工具
- 提升开发效率：API 调试、性能分析、UI 设计辅助
- 构建商业产品：SaaS 工具的浏览器客户端、数据采集平台
- 自动化工作流：表单自动填写、网页内容抓取、批量操作
自 Manifest V3（MV3）全面推行以来，Chrome 扩展的架构发生了重大变革：后台页面（Background Page）被 Service Worker 取代，远程代码执行被禁止，网络请求拦截从 webRequest 转向 declarativeNetRequest。本指南以 MV3 为基础，全面覆盖最新开发实践。
教程结构
本指南共 18 章，按学习路径分为 5 个模块：
模块一：基础入门（第 1-2 章）
| 章节 | 标题 | 核心内容 |
|---|---|---|
| 01 | Chrome 扩展概述 | 扩展架构、Manifest V3 变更、开发环境搭建 |
| 02 | 项目结构与基础 | 目录结构、manifest.json 完整字段、加载与调试 |
模块二：核心组件（第 3-7 章）
| 章节 | 标题 | 核心内容 |
|---|---|---|
| 03 | 后台脚本 | Service Worker 生命周期、事件监听、离线处理 |
| 04 | 内容脚本 | DOM 注入、隔离世界、Content Script 通信 |
| 05 | 弹出页面 | Popup UI 设计、交互模式、与后台通信 |
| 06 | 选项页面 | Options Page、用户偏好、同步配置 |
| 07 | 侧边栏 | Side Panel API、持久化 UI、多标签页管理 |
模块三：数据与通信（第 8-9 章）
| 章节 | 标题 | 核心内容 |
|---|---|---|
| 08 | 存储 API | local / sync / session 存储、数据迁移、容量限制 |
| 09 | 消息通信 | 一次性消息、长连接端口、跨扩展通信、Native Messaging |
模块四：功能与 API（第 10-14 章）
| 章节 | 标题 | 核心内容 |
|---|---|---|
| 10 | 权限管理 | 权限声明、可选权限、权限最佳实践 |
| 11 | 网络请求 | declarativeNetRequest、请求拦截、规则管理 |
| 12 | 右键菜单 | Context Menus API、多层级菜单、场景应用 |
| 13 | 通知系统 | Notifications API、桌面通知、徽章管理 |
| 14 | 国际化 | i18n API、消息文件、多语言切换 |
模块五：工程化与发布（第 15-18 章）
| 章节 | 标题 | 核心内容 |
|---|---|---|
| 15 | 发布与审核 | Chrome Web Store 发布、审核要点、版本管理 |
| 16 | 安全策略 | CSP 配置、沙箱机制、XSS 防御、安全清单 |
| 17 | 容器化开发 | Docker 开发环境、CI/CD 构建流水线 |
| 18 | 最佳实践 | 性能优化、代码规范、架构模式、调试技巧 |
学习路径建议
初学者路径: 01 → 02 → 03 → 04 → 05 → 08 → 09 → 18
进阶路径: 06 → 07 → 10 → 11 → 12 → 13 → 14
工程化路径: 15 → 16 → 17 → 18
环境要求
| 工具 | 最低版本 | 说明 |
|---|---|---|
| Chrome | 116+ | Side Panel API 需要 116+ |
| Node.js | 18+ | 构建工具运行环境 |
| npm / pnpm | 8+ / 7+ | 包管理器 |
| Git | 2.30+ | 版本管理（可选） |
| Docker | 24+ | 第 17 章容器化开发需要 |
约定说明
本指南中使用以下图标标记不同类型的内容：
- 💡 提示：有用的技巧或额外信息
- ⚠️ 注意：容易出错或需要注意的地方
- 🚫 警告：可能导致功能失效的操作
- 📌 最佳实践：推荐的做法
- 🔗 扩展阅读：相关文档或参考链接
许可
本教程内容基于 CC BY-SA 4.0 协议发布。示例代码基于 MIT License 开源。