Google uses AI technology to translate content into your preferred language. AI translations can contain errors.

架构概览

扩展程序是 HTML、CSS、JavaScript、图片和网络平台中使用的其他文件的压缩包，用于自定义 Google Chrome 浏览体验。扩展程序是使用网络技术构建的，可以使用浏览器向开放网络提供的相同 API。

扩展程序具有广泛的功能可能性。它们可以修改用户看到和与之互动的网络内容，也可以扩展和更改浏览器本身的行为。

您可以将扩展程序视为通往 Chrome 浏览器的门户，让 Chrome 浏览器成为最个性化的浏览器。

扩展程序文件

扩展程序的文件类型和目录数量各不相同，但都必须包含 [清单][docs-manifest]。一些基本但实用的扩展程序可能仅包含清单及其工具栏图标。

清单文件（名为 manifest.json）会向浏览器提供有关扩展程序的信息，例如最重要的文件以及扩展程序可能使用的功能。

{
  "name": "My Extension",
  "version": "2.1",
  "description": "Gets information from Google.",
  "icons": {
    "128": "icon_16.png",
    "128": "icon_32.png",
    "128": "icon_48.png",
    "128": "icon_128.png"
  },
  "background": {
    "persistent": false,
    "scripts": ["background_script.js"]
  },
  "permissions": ["https://*.google.com/", "activeTab"],
  "browser_action": {
    "default_icon": "icon_16.png",
    "default_popup": "popup.html"
  }
}

扩展程序必须有一个位于浏览器工具栏中的图标。工具栏图标可让用户轻松访问，并让用户了解已安装的扩展程序。大多数用户都会通过点击图标与使用弹出式窗口的扩展程序互动。

此 Google Mail Checker 扩展程序使用浏览器操作：

Google 邮件检查器扩展程序的屏幕截图

此 Mappy 扩展程序使用页面操作和内容脚本：

Mappy 扩展应用的屏幕截图

引用文件

与普通 HTML 网页中的文件一样，扩展程序的文件也可以使用相对网址进行引用。

<img src="images/my_image.png">

此外，每个文件还可以使用绝对网址进行访问。

chrome-extension://EXTENSION_ID/PATH_TO_FILE

在绝对网址中，EXTENSION_ID 是扩展程序系统为每个扩展程序生成的唯一标识符。如需查看所有已加载扩展程序的 ID，请前往 chrome://extensions 网址。PATH_TO_FILE 是扩展程序顶级文件夹下文件的位置；它与相对网址匹配。

在处理未打包的扩展程序时，扩展程序 ID 可能会发生变化。具体而言，如果未打包的扩展程序是从其他目录加载的，则其 ID 会发生变化；当扩展程序打包时，ID 会再次发生变化。如果扩展程序的代码依赖于绝对网址，则它可以使用 chrome.runtime.getURL() 方法来避免在开发期间对 ID 进行硬编码。

架构

扩展程序的架构取决于其功能，但许多强大的扩展程序都包含多个组件：

清单
后台脚本
界面元素
内容脚本
选项页面

后台脚本

后台脚本是扩展程序的事件处理脚本；它包含对扩展程序重要的浏览器事件的监听器。它处于休眠状态，直到事件触发，然后执行指示的逻辑。有效的后台脚本仅在需要时加载，并在空闲时卸载。

界面元素

扩展程序的界面应具有明确的目的且简洁明了。界面应自定义或增强浏览体验，而不会分散用户的注意力。大多数扩展程序都有浏览器操作或页面操作，但可以包含其他形式的界面，例如上下文菜单、使用多功能框或创建键盘快捷键。

扩展程序界面页面（例如弹出式窗口）可以包含带有 JavaScript 逻辑的普通 HTML 页面。扩展程序还可以调用 tabs.create 或 window.open() 来显示扩展程序中存在的其他 HTML 文件。

使用页面操作和弹出式窗口的扩展程序可以使用声明式内容 API 在后台脚本中设置规则，以确定何时向用户提供弹出式窗口。满足条件后，后台脚本会与弹出式窗口通信，使其图标可供用户点击。

包含显示弹出式窗口的网页操作的浏览器窗口

内容脚本

读取或写入网页的扩展程序会使用内容脚本。内容脚本包含在已加载到浏览器中的页面的上下文中执行的 JavaScript。内容脚本会读取和修改浏览器访问的网页的 DOM。

一个浏览器窗口，其中包含页面操作和内容脚本

内容脚本可以通过交换消息和使用 Storage API 存储值来与其父扩展程序通信。

显示内容脚本与父扩展程序之间的通信路径

选项页面

正如扩展程序允许用户自定义 Chrome 浏览器一样，选项页面也允许自定义扩展程序。选项可用于启用功能，并允许用户选择与其需求相关的功能。

使用 Chrome API

除了可以访问与网页相同的 API 之外，扩展程序还可以使用扩展程序专用的 API，这些 API 可以与浏览器紧密集成。扩展程序和网页都可以访问标准 window.open() 方法来打开网址，但扩展程序可以指定应在哪个窗口中显示该网址，方法是改用 Chrome API tabs.create 方法。

异步方法与同步方法

大多数 Chrome API 方法都是异步的：它们会立即返回，而无需等待操作完成。如果扩展程序需要知道异步操作的结果，它可以将回调函数传递给该方法。回调会在方法返回后执行，可能是在很久之后。

如果扩展程序需要将用户当前选择的标签页导航到新网址，则需要获取当前标签页的 ID，然后将该标签页的地址更新为新网址。

如果 tabs.query 方法是同步的，则可能如下所示。

//THIS CODE DOESN'T WORK
var tab = chrome.tabs.query({'active': true}); //WRONG!!!
chrome.tabs.update(tab.id, {url:newUrl});
someOtherFunction();

此方法将失败，因为 query() 是异步的。它会返回，而无需等待工作完成，并且不会返回值。当回调参数在其签名中可用时，方法是异步的。

// Signature for an asynchronous method
chrome.tabs.query(object queryInfo, function callback)

如需正确查询标签页并更新其网址，扩展程序必须使用回调参数。

//THIS CODE WORKS
chrome.tabs.query({'active': true}, function(tabs) {
  chrome.tabs.update(tabs[0].id, {url: newUrl});
});
someOtherFunction();

在上面的代码中，这些行按以下顺序执行：1、4、2。系统会调用为 query() 指定的回调函数，然后执行第 2 行，但前提是当前所选标签页的信息可用。这会在 query() 返回后的一段时间内发生。虽然 update() 是异步的，但代码不会使用回调参数，因为扩展程序不会对更新结果执行任何操作。

// Synchronous methods have no callback option and returns a type of string
string chrome.runtime.getURL()

此方法会同步返回网址（以 string 形式），并且不会执行任何其他异步工作。

页面间通信

扩展程序中的不同组件通常需要相互通信。不同的 HTML 页面可以使用 chrome.extension 方法（例如 getViews()和 getBackgroundPage()）相互查找。当页面引用其他扩展程序页面后，第一个页面可以调用其他页面上的函数并操纵其 DOM。此外，扩展程序的所有组件都可以访问使用 Storage API 存储的值，并通过消息传递进行通信。

保存数据和无痕模式

扩展程序可以使用 Storage API、HTML5 Web Storage API 或通过发出服务器请求来保存数据，从而保存数据。当扩展程序需要保存某些内容时，首先要考虑它是否来自无痕式窗口。默认情况下，扩展程序不会在无痕式窗口中运行。

无痕模式承诺窗口不会留下任何痕迹。在处理来自无痕式窗口的数据时，扩展程序应遵守此承诺。如果扩展程序通常会保存浏览记录，则不要保存来自无痕式窗口的记录。不过，扩展程序可以存储来自任何窗口（无论是否为无痕式窗口）的设置偏好。

如需检测窗口是否处于无痕模式，请检查相关 tabs.Tab或windows.Window对象的incognito属性。

function saveTabData(tab) {
  if (tab.incognito) {
    return;
  } else {
    chrome.storage.local.set({data: tab.url});
  }
}

更进一步

阅读完概览并完成入门教程，开发者应该可以开始编写自己的扩展程序了！借助以下资源，更深入地了解自定义 Chrome 的世界。

在调试教程中了解可用于调试扩展程序的选项。
Chrome 扩展程序可以访问强大的 API，这些 API 超出了开放网络上可用的 API。 chrome.* API 文档将介绍每个 API。
扩展程序开发概览中提供了数十个其他链接，指向与高级扩展程序创建相关的文档。