chrome 扩展程序开发

前言

Chrome 扩展程序是一种可以在浏览器中运行的程序，借助浏览器提供的 API，可以增强页面的功能。Chrome 扩展程序的语法和 Web 前端类似，也是 html/css/js 的组合。

架构

Chrome 扩展程序主要由以下几部分组成：

• Manifest.json：描述扩展程序的基本信息，包括名称、版本、作者、描述等。
• Background Script：后台脚本，扩展程序加载时会被自动执行，并且一直存在于扩展程序的整个生命周期。
• Content Script：内容脚本，会插入到页面中，可以访问 DOM 并且可以修改 DOM，也可以和扩展程序通信。
• UI elements：用来增强浏览器的用户体验，如果扩展程序需要显示一些 UI 元素，可以在这里添加。比如右键菜单、快捷键、地址栏和点击插件出现的 popup 等。
• Options page：设置页面，用来设置扩展程序的一些配置信息。

除了 Manifest.json 必须存在外，其他所有文件都是可选的。

Manifest.json

必须有的属性：

• manifest_version - manifest 的版本
• name - 插件的名字
• version - 插件版本

manifest_version 目前 Chrome 浏览器推荐 3，2023 年将停止支持 2，但目前国内如 360 安全浏览器等浏览器仍然只支持 2。

Content Script 的注入方式

1）静态声明式注入

在 manifest.json 中的 content_scripts 的字段：

{
 "name": "My extension",
 ...
 "content_scripts": [
   {
     "matches": ["https://*.nytimes.com/*"],
     "css": ["my-styles.css"],
     "js": ["content-script.js"]
   }
 ],
 ...
}

2）以编程方式注入

//// content-script.js ////
document.body.style.backgroundColor = 'orange';

//// background.js ////
chrome.action.onClicked.addListener((tab) => {
  chrome.scripting.executeScript({
    target: { tabId: tab.id },
    files: ['content-script.js'],
  });
});

v2 和 v3 版本的一些差异

1. background 使用了 service worker 替代了原来的 background 页面
2. 需要指定 host permissions
3. browser_action 和 page_action 合并为 action
4. web_accessible_resources 由字符串数组变为对象数组

更多请查阅官方文档。

一些注意事项

1. 扩展程序中的 html 不能执行内联 js。
2. manifest.json 中的 Match patterns 包含 scheme、host、path 三个部分，v3 版本使用 匹配所有 url。
3. 很多扩展 API 已支持 promise，如果没有传 callback 参数则返回 promise。

为扩展程序提供的常用 API

1. chrome.cookies - 操作 cookie
2. chrome.tabs - tab 相关
3. chrome.webRequest - 观察、分析、拦截、修改请求
4. chrome.bookmarks - 操作书签
5. chrome.contextMenus - 操作右键菜单
6. chrome.storage - 操作本地存储

安装和调试

1. 浏览器打开扩展程序管理界面 chrome://extensions
2. 开启 “开发者模式”
3. 可以选择 “加载已解压的扩展程序”，选择本地开发目录

开发时可以点击扩展程序开关旁边的刷新按钮重新载入插件。要调试 popup 需要在菜单栏右键扩展程序选择 Inspect Popup, 调试 background 则需要在扩展程序管理界面中对应扩展找到 background 页面或者 service worker （v3）。