一、Chrome 插件基础认知
在动手开发之前，先了解 Chrome 插件的基本概念、运行机制和适用场景，有助于后续章节的实践。
1.1 什么是 Chrome 插件
Chrome 插件（Extension）是基于 Web 技术（HTML、CSS、JavaScript）构建的小型程序，用于扩展浏览器功能，例如拦截请求、修改页面、增强开发者工具等。
1.2 插件的核心组成
- Manifest 清单文件：声明插件名称、权限、入口文件等元信息。
- Background Script：后台常驻脚本，负责全局逻辑和事件监听。
- Content Script：注入到网页中的脚本，可操作页面 DOM。
- Popup / Options 页面：工具栏弹窗和设置页。
1.3 插件能做什么
- 修改网页内容与样式。
- 拦截和监听网络请求。
- 跨页面共享数据与状态。
- 调用浏览器 API（书签、历史、下载等）。
二、开发环境准备
本节介绍搭建 Chrome 插件开发环境所需的工具和步骤。
2.1 所需工具
- Chrome 浏览器（建议最新稳定版）。
- 代码编辑器（VS Code、WebStorm 等）。
- Node.js（可选，用于构建和调试工具链）。
2.2 创建项目目录
新建一个项目文件夹，并在其中创建 manifest.json、background.js、content.js 等基础文件。
2.3 加载未打包插件
打开 chrome://extensions 页面，开启「开发者模式」，点击「加载已解压的扩展程序」，选择项目目录即可完成加载。
三、Manifest 清单文件详解
Manifest 是插件的配置文件，其版本和字段直接影响插件能力。
3.1 Manifest V3 核心字段
- manifest_version：固定为 3。
- name / version：插件名称和版本号。
- description：插件功能描述。
- permissions：声明所需权限。
- action：配置工具栏图标和弹窗。
- background：注册 Service Worker。
- content_scripts：声明注入脚本和匹配规则。
3.2 Manifest V2 与 Manifest V3 核心字段对比
下表梳理了 Manifest V2 与 Manifest V3 在后台脚本、权限声明和 API 使用上的关键差异，便于迁移时对照调整。
| 对比维度 | Manifest V2 | Manifest V3 |
|---|---|---|
| 后台脚本 | background 页面（常驻后台，可长期运行） | background Service Worker（事件驱动，空闲后休眠） |
| 后台声明方式 | background.scripts 指定脚本数组 | background.service_worker 指定单个 Service Worker 文件 |
| 权限声明方式 | permissions 中声明 API 权限，host_permissions 可选 | permissions 声明 API 权限，跨域访问必须单独声明 host_permissions |
| 工具栏入口 | browser_action 或 page_action | 统一使用 action 字段 |
| 远程代码 | 允许加载远程托管的脚本 | 禁止远程代码，所有脚本必须打包在插件内 |
| 跨域请求 | 可在 background 页面中直接发起跨域请求 | 需在 host_permissions 中声明目标域名，并配合 Service Worker 处理 |
| API 差异 | chrome.extension.getBackgroundPage 等旧 API 可用 | 推荐使用 chrome.runtime、chrome.storage 等新 API，部分旧 API 已移除 |
| 数据持久化 | 可依赖后台页面全局变量保存状态 | Service Worker 会休眠，必须使用 chrome.storage 持久化数据 |
3.2 权限声明注意事项
权限应遵循最小化原则，只申请实际用到的 API，避免审核被拒或引发用户警惕。
四、Content Script 实战
Content Script 是操作网页内容的核心手段，本节通过示例演示其用法。
4.1 注入与匹配规则
在 manifest 中通过 matches 字段声明要注入的网址模式，例如 https://example.com/\*。
4.2 操作页面 DOM
Content Script 可以读取和修改页面元素，例如高亮关键词、插入提示条等。
4.3 与页面通信
通过 chrome.runtime.sendMessage 和 chrome.tabs.sendMessage 实现 Content Script 与 Background 之间的消息传递。
五、Background Service Worker
Manifest V3 使用 Service Worker 替代旧版后台页面，本节介绍其生命周期和典型用法。
5.1 注册与生命周期
Service Worker 在事件触发时启动，空闲后休眠，因此不能依赖全局变量保存状态。
5.2 监听浏览器事件
可以监听 chrome.tabs、chrome.runtime、chrome.webRequest 等事件，实现全局逻辑。
5.3 数据持久化方案
使用 chrome.storage.local 或 chrome.storage.sync 保存数据，避免因 Service Worker 休眠导致数据丢失。
六、Popup 与 Options 页面
Popup 是点击工具栏图标时弹出的界面，Options 是插件设置页，两者都基于普通 HTML 页面。
6.1 配置 Popup 页面
在 manifest 的 action.default_popup 中指定 popup.html，即可在点击图标时展示。
6.2 实现 Options 设置页
通过 options_page 字段注册设置页，用户可在此配置插件参数。
6.3 页面间数据共享
利用 chrome.storage 在 Popup、Options 和 Content Script 之间同步配置数据。
七、消息通信机制
插件各模块之间通过消息机制协作，本节梳理常用通信模式。
7.1 单向消息
使用 chrome.runtime.sendMessage 发送一次性消息，接收方通过 onMessage 监听并响应。
7.2 长连接通信
使用 chrome.runtime.connect 建立长连接，适用于频繁双向通信的场景。
7.3 跨上下文通信
Content Script 与 Background、Popup 之间通过 tabId 定向发送消息，确保消息到达正确的页面。
八、实战案例：网页关键词高亮插件
综合前面所学，本节实现一个完整的「网页关键词高亮」插件。
8.1 功能需求
- 用户输入关键词列表。
- Content Script 扫描页面文本并高亮匹配内容。
- Popup 提供关键词输入和保存功能。
8.2 核心代码实现
编写 manifest.json、background.js、content.js 和 popup.html，实现完整功能。
8.3 调试与验证
在目标网页上测试高亮效果，并通过开发者工具查看 Console 日志排查问题。
九、调试与发布
开发完成后，需要经过调试、打包和发布流程才能上线。
9.1 使用开发者工具调试
在 chrome://extensions 中点击「检查视图」打开 Service Worker 调试面板，Content Script 可在对应网页的开发者工具中调试。
9.2 打包插件
在扩展管理页点击「打包扩展程序」，生成 .crx 安装包和 .pem 私钥文件。
9.3 发布到 Chrome 应用商店
注册开发者账号，上传打包文件并填写商店信息，等待审核通过后即可公开分发。
十、常见问题与最佳实践
最后总结开发过程中常见的问题和值得遵循的实践规范。
10.1 常见问题
- Content Script 未生效：检查 matches 匹配规则和权限声明。
- Service Worker 状态丢失：改用 chrome.storage 持久化数据。
- 跨域请求被拦截：在 manifest 中声明 host_permissions。
10.2 最佳实践
- 权限最小化，只申请必要 API。
- 代码模块化，便于维护和扩展。
- 做好错误处理与日志输出，方便排查。
- 关注 Manifest V3 规范变化，及时适配。