Chrome 插件开发指南和实践

看完这篇文章你会学到

1. Chrome 插件可以做什么
2. Chrome插件整体架构
3. 如何开发 Chrome 插件（Popup 和 Devtools）
4. 如何使用前端框架（React/Vue）进行开发
5. 如何调试插件
6. 如何使用 Puppeteer 对插件进行 E2E 测试（本地和 CI 环境）

Chrome 插件可以做什么

1. 修改请求，包括修改请求和响应头，配置代理等，例如 模块头
2. 在运行时将脚本注入页面，例如 Tampermonkey（油猴）
3. 翻译、音乐等，例如 沙拉查询词 网易云音乐

总之，普通浏览器能做到的，插件基本都能做到

整体架构介绍

清晰的概念

Chrome插件本质上是一个特殊的网页，在此基础上，我们澄清下标题

• 插件页面：指插件网页的内容
• 目标页面：指打开插件的页面，这个页面就是目标页面，比如在百度打开插件，百度就是此时的目标页面
• Popup：安装插件时，浏览器右上角会有一个插件图标，点击打开的页面是Popup（弹窗）
• Devtools：F12 打开开发者工具并将它们显示在顶部。比如 element 和 network 都是 Devtools。
• Tab：每一个底部都是一个单独的Tab，中间高亮部分是当前停留的页面，即 活动标签

清单.json

扩展从它们的清单开始，每个扩展都需要一个清单。

每个扩展都以清单描述文件开头，每个扩展都需要它。

官方文档： developer.chrome.com/docs/extens…

类似于前端项目 包.json 文件，用于描述整个插件的结构和权限，类似如下结构，所有字段都可以在官网查看

{
"name" : "Hello Extensions" , // 名称
"description" : "入门教程" , // 描述
"version" : "1.0" , // 插件版本
"manifest_version" : 3 , // manifest 的版本，目前使用 V3

// action字段主要描述点击右上角图标弹出的页面
“行动” ： {
"default_popup" : "index.html" //对应入口html文件（Popup后面会介绍）
"default_title" : "Garfish 模块" ,
“默认图标”：{
"16": "favicon.ico",
"48": "favicon.ico",
“128”：“favicon.ico”
}
} ,

// 当需要使用一些特殊的API时，需要在permissions中声明权限，会提示给用户
“权限”：[“存储”，“脚本”]，

// 允许哪些域使用插件
“主机权限”：[“<all_urls> " ] ,

// 声明后台Service Worker的路径，后面会介绍
“背景” ： {
“service_worker”：“background.js”
} ,

// 声明内容脚本的入口文件路径，允许的域名和执行时间
“内容脚本”：[{
“js”：[“content.js”]
“火柴” ： [ ”<all_urls> " ] ,
// 共有三个值“document_start” “document_idle” “document_end”
“run_at”：“document_idle”，
}
复制代码

content_script（内容脚本）

内容脚本是在网页上下文中运行的文件。通过使用标准 文档对象模型 (DOM)，它们能够读取浏览器访问的网页的详细信息，对其进行更改，并将信息传递给它们的父扩展。

内容脚本在 目标页面 要在上下文中运行的文件。通过使用标准的文档对象模型 (DOM)，他们可以阅读 目标页面 详细信息，对其进行更改，并将信息传递给其父扩展。

官方文档： developer.chrome.com/docs/extens…

content_script 本质上是一个 js文件 , 可以使用 特定于插件的 API ，并且可以在目标页面的上下文中操作DOM，在需要操作目标页面的DOM时可以使用， 它的生命周期随着插件的打开和关闭而开始和结束 .

但请注意 content_script 有自己的 独立上下文 ，这意味着它在类似沙盒的环境中运行。此时修改content_script中的全局变量，如window.a = 1，将不会体现在 目标页面 而不是修改沙箱中的 window 变量。

service_worker（后台）

事件是浏览器触发器，例如导航到新页面、删除书签或关闭选项卡。扩展使用后台服务工作者中的脚本监控这些事件，然后根据指定的指令做出反应。

浏览器触发事件​​，例如导航到新页面、删除书签或关闭选项卡。该扩展使用后台服务工作者来监听这些事件并在触发时执行回调。

官方文档： developer.chrome.com/docs/extens…

service_worker 在单独的线程中运行，您可以使用 特定于插件的 API ，本质上也是一个js文件，和content_script的区别是：

• service_worker 的生命周期较长，从打开浏览器开始，到关闭浏览器结束。 content_script 的生命周期遵循插件的打开和关闭。通常使用 service_worker 监听一些用户操作来执行回调
• service_worker 无法访问目标页面的 DOM，而 content_script 可以

弹出

点击浏览器插件右上角的小图标时弹出的页面称为Popup，它的视图本质上是一个Web页面

Devtools（调试工具）

DevTools 扩展的结构与任何其他扩展类似：它可以有背景页面、内容脚本和其他项目。此外，每个 DevTools 扩展都有一个 DevTools 页面，可以访问 DevTools API。

DevTools 扩展的结构与任何其他扩展类似：它可以有一个后台页面（服务工作者）、内容脚本和其他项目。此外，每个 DevTools 扩展都有一个 DevTools 页面，提供对 DevTools API 的访问。

官方文档： developer.chrome.com/docs/extens…

Devtools 也是一种插件形式。与 Popup 不同，它有一组 chrome.devtools 独有的 API。当我们调用 chrome.devtools.panels.create 时，我们可以创建一个自定义面板

铬合金。开发工具。面板。创造（
// 扩展面板显示名称
"开发面板",
// 扩展面板图标，不显示
"面板.png",
// 扩展面板页面
"index.html",
功能（面板）{
安慰。 log("自定义面板创建成功！");
}
);
复制代码

像 Vue Devtools 和 React Devtools 都是这种形式，视图本质上是一个网页

沟通

完整的通讯推荐查看： juejin.cn/post/702107…

由于 content_script 和 service worker 独立于插件页面，所以经常需要消息传递。基本方法

// 发送者服务工作者 ||内容脚本
铬 .runtime .sendMessage（数据）

// 接收者内容脚本 ||服务人员
铬 .runtime .onMessage .addListener(() => {})
复制代码

但是，通常有多个 content_scripts 并且只有一个 service_worker。上面的方法会通知所有的 content_scripts，导致问题。建议指定发送到某个 Tab 的 content_script。

// 获取当前活动Tab（活动Tab的概念可以看“定义概念”部分）
铬合金。标签。查询（{活动：真}，（标签）=> {
铬合金。标签。 sendMessage(tabs[0].id, 响应 =>{
安慰。 log("背景 -> 内容脚本信息已发送"); }
}
复制代码

如何开发自己的插件

目录结构

你好扩展
├── 背景
│ └── index.js
├── index.html
├── index.js
├── manifest.json
├── package-lock.json
├── package.json
└── 脚本
└── index.js
复制代码

配置 manifest.json

{
“名称”：“你好扩展”，
“描述”：“基本级别扩展”，
“版本”：“1.0”，
“manifest_version”：3，
“行动” ： {
"default_title" : "你好扩展" ,
"default_popup" : "index.html" // 指向入口 html 文件
} ,
“背景” ： {
"service_worker" : "background/index.js" // 指向一个 js 文件
} ,
“内容脚本”：[{
“火柴” ： [ ”<all_urls> " ] ,
“run_at”：“document_idle”，
"js" : [ "scripts/index.js" ] // 指向一个 js 文件
} ] ,
}
复制代码

弹出入口html

// index.html

< html lang = "en" >
<头>
<元字符集=“UTF-8”>
< meta http-equiv = "X-UA-Compatible" 内容 = "IE=edge" >
<元名称=“视口”内容=“宽度=设备宽度，初始比例=1.0”>