Chrome 插件开发指南
基于 Manifest V3 的 Chrome 扩展开发中文指南——从 Hello World 到上架 Chrome Web Store。
作者 David更新于
Chrome 扩展（Extension）是在浏览器里运行的小型程序：可以改网页、拦请求、加侧边栏、接快捷键，而不必 fork Chromium。本专栏面向有前端/JS 基础、没写过插件的开发者，全程使用 Manifest V3（MV3）——2024 年起新上架扩展的唯一标准。
本指南以 Chrome 128+、Chromium 系浏览器（Edge、Brave 等）为准。API 名称与官方 Chrome Extensions 文档 对齐。10 课实战完整源码已开源：github.com/davidapp/chrome-extension-demos，每个 Demo 目录均可直接在 chrome://extensions 加载验证。
学习路径
入门（扩展是什么、环境、第一个插件）
↓
Manifest V3（清单、Service Worker、Content Script、Popup）
↓
通信与存储（消息、chrome.storage、网络与 CORS）
↓
权限与安全（最小权限、CSP、host_permissions）
↓
进阶 API（Side Panel、Scripting、declarativeNetRequest）
↓
工程化（调试、测试、项目结构、上架商店）章节目录
入门
- 扩展是什么 — 与网页、PWA、用户脚本的边界
- 开发环境准备 — Chrome、加载方式、目录结构
- Hello World — 最小可运行 MV3 扩展
Manifest V3
- manifest.json 概览 — 字段、版本、action、icons
- Service Worker — 后台脚本、生命周期、事件
- Content Scripts — 注入页面、隔离世界、run_at
- Popup 与选项页 — action popup、options_page、React 集成
通信与存储
- 消息传递 — runtime.sendMessage、长连接、与页面通信
- 存储 API — local / sync / session，配额与迁移
- 网络与 CORS — fetch、host_permissions、跨域限制
权限与安全
进阶 API
- Side Panel — 侧边栏 UI、与 Tab 联动
- Scripting API — 动态注入、executeScript、registerContentScripts
- declarativeNetRequest — 规则化拦截/重定向（替代 webRequest 阻塞）
工程化
- 调试 — Service Worker 调试、Content Script 断点
- 测试策略 — 单元测试、Puppeteer、CI
- 项目结构 — 构建、TypeScript、WXT/Plasmo 选型
- 上架 Chrome Web Store — 打包、开发者账号、审核要点
附录
适合谁
- 会写 HTML/CSS/JS 或 TypeScript，想给浏览器加能力的开发者
- 需要把现有 Web 能力「钉」在特定站点上的产品/工具作者
- 想理解 MV3 与 MV2 差异、避免审核踩坑的维护者
写作原则
- 可运行优先——开源 Demo 仓库 提供 10 个完整可加载项目；专栏文章讲解原理与关键片段，完整 HTML/CSS/JS 以仓库为准。
- MV3 唯一——不教已废弃的持久 background page、
webRequest阻塞模式。 - 权限即设计——先问「最少需要哪些 host_permissions」，再写功能。
实战课程（配套开源仓库）
完整源码：davidapp/chrome-extension-demos（Chrome 116+，纯 HTML/CSS/JS，无需构建）。建议 clone 后按编号顺序学习：
git clone https://github.com/davidapp/chrome-extension-demos.git
cd chrome-extension-demos在 chrome://extensions 开启开发者模式 → 加载已解压的扩展程序 → 选择对应课次文件夹（如 01-hello-popup）。每课目录内的 README.md 含逐步操作与课后练习。
| 课 | 文章 | 源码目录 | 主题 |
|---|---|---|---|
| 01 | Hello Popup | 01-hello-popup | MV3、Popup、CSP |
| 02 | Content Script | 02-content-script | 隔离世界、scripting |
| 03 | Service Worker | 03-service-worker | 后台事件、Badge |
| 04 | 消息传递 | 04-message-passing | 划词翻译 |
| 05 | Storage API | 05-storage-api | Todo、onChanged |
| 06 | Options Page | 06-options-page | 选项页、sync |
| 07 | Context Menus | 07-context-menus | 右键菜单、Toast |
| 08 | Side Panel | 08-side-panel | 侧边栏笔记本 |
| 09 | DNR | 09-declarative-net-request | 广告拦截规则 |
| 10 | Offscreen | 10-offscreen-document | 后台 TTS |
也可在 GitHub 上 Download ZIP 后解压使用。专栏文章与仓库 README 互补：文章讲「为什么」与架构，仓库给「完整能跑」的实现。