Chrome插件开发

官方文档：Chrome 扩展开发文档
示例仓库：GitHub Chrome 扩展示例

技术栈

基础技术：HTML（界面）、CSS（样式）、JavaScript（逻辑），也可以使用框架开发。
核心配置文件：manifest.json（定义扩展的元数据、权限和功能）。
核心组件：Service Worker（后台脚本），Content Scripts（内容脚本），UI（用户界面）
消息传递：各模块之间的消息传递
浏览器 API：通过 chrome.* 命名空间调用（如 chrome.tabs、chrome.storage）。

关键文件

manifest.json

{
  "manifest_version": 3,
  "name": "页面标题修改器",
  "version": "1.0",
  "description": "一个简单的标题修改插件",
  "permissions": [
    "activeTab"
  ],
  "action": {
    "default_popup": "popup.html",
    "default_title": "修改页面标题"
  },
  "content_scripts": [
    {
      "matches": ["<all_urls>"],
      "js": ["content.js"]
    }
  ],
  "background": {
    "service_worker": "background.js"
  },
  ...
}

借助浏览器可以实现以下功能：

修改网页内容（如广告拦截、样式修改）。
浏览器功能扩展（如快捷键、标签管理、下载工具）。
数据存储与同步（如密码管理、笔记工具）。
调用浏览器 API（如书签、历史记录、网络请求拦截）。

扩展程序在用户授权下运行，需明确声明权限（如访问特定网站、读取剪贴板），遵循安全沙箱机制，确保用户隐私。

chrome插件能力

1. 设计能力

控制插件图标在工具栏中的显示。

{
  "action": {
    "default_popup": "popup.html",
    "default_title": "修改页面标题"
  },
}

菜单项（Menus）

向 Google Chrome 的上下文菜单添加项。

侧边栏（`Side panel`）

2. 控制浏览器

借助 Chrome 的插件 API，可以改变浏览器的工作方式：

覆盖 Chrome 页面和设置项：Manifest.json 配置 chrome_settings_overrides
插件开发者工具：Manifest.json 配置 devtools_page
显示通知：chrome.notifications API
管理历史记录：chrome.history API
控制标签页和窗口：chrome.tabs、chrome.tabGroups 和 chrome.windows 等 API
键盘快捷键：chrome.commands API
身份认证：chrome.identity API
管理插件：chrome.management API
提供建议：chrome.omnibox API
更新 Chrome 设置：chrome.proxy API
下载管理：chrome.downloads API
书签：chrome.bookmarks API
......

3. 控制网络

可以通过注入脚本、拦截网络请求以及使用 Web API 与网页进行交互，来控制和修改 Web：

注入 JS 和 CSS 文件
访问当前 Tab 页
控制 Web 请求
录音和屏幕截图
修改网站设置

`Chrome` 插件核心概念

使用 Web 平台和扩展 API，可以通过组合不同的界面组件和扩展平台功能来构建更复杂的功能。

1. Service Worker

Service worker 是一个基于事件的脚本，在浏览器后台运行。它通常用于处理数据、协调扩展中不同部分的任务，以及作为扩展的事件管理器。

2. `Permissions` 权限

插件在浏览器中获取的功能和数据访问权限，通过声明所需的权限，插件可以执行更广泛的操作。

权限最小化原则，需要哪些权限加哪些权限。

3. `Content script` 内容脚本

内容脚本是在网页环境中运行的文件，可以操作 DOM，读取浏览器访问网页的信息，对网页就行更改等。

4. Action/Popup

浏览器工具栏中显示的图标或按钮，用户可以单击该图标或按钮来执行插件提供的功能或操作。

5. 消息传递

一般来说，消息传递是指 action、content script、service worker 三者之间进行消息传递。

正式由于沙箱机制的处理，Chrome 扩展的不同组件运行在独立的上下文中，彼此权限不同：

组件	权限范围
内容脚本（Content Scripts）	- 可以访问当前网页的 DOM，但无法直接调用敏感浏览器 API（如 `chrome.tabs`）。 - 需通过消息传递与后台脚本（Service Worker）通信。
后台脚本（Service Worker）	- 可以调用浏览器 API（如操作标签页、书签、存储数据），但无法直接访问网页 DOM。 - 不持久化运行，仅在事件触发时激活。
弹出页（Popup）或选项页（Options Page）	- 普通网页环境，默认无法直接访问浏览器 API，需通过 `chrome.runtime` API 与后台通信。

6. `Storage` 存储

Chrome 插件有一个专门的 storage API，用来进行数据存储。

7. 匹配模式

在开发 Chrome 插件时，可以使用的一种模式匹配语法，用于指定插件的内容脚本或页面操作脚本在哪些 URL 匹配模式下执行

技术栈