Chrome 扩展架构

Chrome 扩展的架构

Chrome 扩展程序本质上是打包在一起的 Web 技术：HTML、CSS 和 JavaScript。它们就像是拥有额外权限的迷你网页，可以直接与 Chrome 浏览器进行交互。这种能力使得它们可以修改网页内容、监听浏览器事件，并自定义用户体验。

一个扩展通常由几个核心部分组成，它们协同工作，共同实现扩展的功能。了解这些组件是构建任何 Chrome 扩展的第一步。

清单文件：扩展的大脑

每个 Chrome 扩展的核心都是一个名为 manifest.json 的文件。这个文件是扩展的蓝图和身份证，它以 JSON 格式告诉 Chrome 关于扩展的一切重要信息：它的名称、版本、所需权限以及它包含哪些文件。

每个 Chrome 扩展都始于一个名为 manifest.json 的关键文件。

浏览器解析这个文件来确定扩展的图标应该显示在哪里、应该在哪些页面上运行脚本，以及它需要哪些特殊功能。如果 manifest.json 文件格式不正确或缺少必要信息，扩展将无法加载。

下面是一个基本的 manifest.json 文件示例：

{
  "manifest_version": 3,
  "name": "我的第一个扩展",
  "version": "1.0",
  "description": "一个简单的演示扩展程序。",
  "icons": {
    "16": "images/icon16.png",
    "48": "images/icon48.png",
    "128": "images/icon128.png"
  },
  "action": {
    "default_popup": "popup.html",
    "default_icon": {
      "16": "images/icon16.png"
    }
  },
  "background": {
    "service_worker": "background.js"
  }
}

在这个例子中：

manifest_version：指定清单文件格式的版本。目前必须是 3。
name, version, description：关于扩展的基本信息，会显示在扩展管理页面和 Chrome 网上应用店中。
icons：定义不同尺寸的扩展图标。
action：定义用户与浏览器工具栏中扩展图标交互时的行为，比如显示一个弹出窗口 popup.html。
background：指定一个服务工作线程（Service Worker）文件，用于处理后台事件。

背景脚本：幕后工作者

背景脚本是扩展的事件处理器。它在后台运行，独立于任何特定的网页，监听并响应浏览器事件。例如，你可以在背景脚本中监听用户何时打开一个新的标签页、添加一个书签，或者点击扩展的工具栏图标。

由于背景脚本在需要时才运行，因此它非常适合处理需要长期监听但不需要持续运行的任务。例如，下面是一个简单的背景脚本，它会在扩展首次安装时向控制台打印一条欢迎消息。

// background.js

chrome.runtime.onInstalled.addListener(() => {
  console.log('欢迎使用我的第一个扩展！');
});

内容脚本：与网页互动

当扩展需要读取或修改用户正在浏览的网页时，就需要使用内容脚本。内容脚本是注入到网页上下文中的 JavaScript 文件。它们可以像普通网页脚本一样访问和操作页面的文档对象模型（DOM）。

这意味着内容脚本可以更改文本、点击按钮、填写表单或从页面中提取信息。

内容脚本在一个“隔离世界”中运行。这意味着它们可以操作网页的 DOM，但无法访问该网页的 JavaScript 变量或函数，反之亦然。这种隔离性确保了扩展不会意外地与网页自身的脚本发生冲突。

要在特定页面上运行内容脚本，你需要在 manifest.json 文件中进行声明：

// manifest.json (部分)

"content_scripts": [
  {
    "matches": ["https://*.example.com/*"],
    "js": ["content.js"]
  }
]

上面的配置告诉 Chrome，当用户访问任何 example.com 域名下的页面时，自动注入并执行 content.js 文件。

这个 content.js 文件可以非常简单，比如改变页面的背景颜色：

// content.js

document.body.style.backgroundColor = 'ivory';

用户界面元素

大多数扩展都至少有一个用户界面（UI）元素，以便用户与之交互。最常见的 UI 形式是弹出窗口。

弹出窗口

弹出窗口是一个小型 HTML 文件，当用户点击工具栏中的扩展图标时显示。它非常适合提供临时、集中的功能，比如一个计算器、一个笔记板或一个简单的设置面板。

弹出窗口的 HTML 文件就像任何其他网页一样，可以包含 CSS 和 JavaScript，从而创建丰富的交互体验。

除了弹出窗口，扩展还可以创建其他类型的 UI，比如在 Chrome 的上下文菜单中添加新选项，或者使用 HTML 创建一个完整的选项页面，让用户可以自定义扩展的行为。

这些核心组件——清单文件、背景脚本、内容脚本和 UI 元素——共同构成了 Chrome 扩展的强大架构。理解它们各自的角色和协作方式，是构建功能丰富且稳定的扩展的关键。

Chrome 扩展开发的技术边界与极限