架构概览

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

扩展程序具有各种功能。他们可以修改用户看到的 Web 内容。 与浏览器交互，或者扩展和更改浏览器本身的行为。

不妨考虑使用扩展程序，让 Chrome 浏览器成为最具个性化的浏览器。

扩展程序文件

扩展程序的文件类型和目录数量各不相同，但它们都需要 [manifest][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 检查工具扩展程序会使用浏览器操作：

Google Mail Checker 扩展程序的屏幕截图

此 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 将 在扩展程序打包时再次更改如果扩展程序的代码依赖于绝对网址， 可以使用 chrome.runtime.getURL() 方法避免在测试过程中对 ID 进行硬编码， 开发。

架构

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

后台脚本

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

界面元素

扩展程序的界面应有针对性并且尽可能小。界面应自定义 可增强浏览体验，同时又不会让用户分心。大多数扩展程序都有浏览器 操作或页面操作，但可以包含其他形式的界面 例如使用上下文菜单、使用多功能框或创建 键盘快捷键。

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

使用页面操作和弹出式窗口的扩展程序可以使用声明式 Content API，以便在后台脚本中设置 提供给用户使用满足条件时，后台脚本会与弹出式窗口进行通信 使用户可点击它的图标

一个浏览器窗口，其中包含用于显示弹出式窗口的网页操作

内容脚本

对网页执行读取或写入操作的扩展程序使用内容脚本。通过 内容脚本中包含在已加载到 。内容脚本会读取和修改浏览器所访问网页的 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 形式同步返回网址，而不执行其他异步工作。

更多详情

如需了解详情，请浏览 Chrome API 参考文档，并观看以下内容 视频。

页面之间的通信

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

正在节省数据流量和无痕模式

扩展程序可以使用 storage API（HTML5 网络存储）来保存数据 API 或通过发出可保存数据的服务器请求来保存数据。当扩展程序 需要保存内容，请先考虑该内容是否来自无痕式窗口。默认情况下，扩展程序 不在无痕式窗口中运行。

无痕模式会保证该窗口不会留下任何痕迹。当处理来自 无痕式窗口，扩展程序应遵守这一承诺。如果扩展程序通常会保存浏览数据 历史记录，不保存无痕式窗口中的历史记录。不过，扩展程序可以存储设置 设置。

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

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

更进一步

阅读完概览并完成使用入门教程之后， 开发者应该准备好开始编写自己的扩展程序！深入探索 自定义 Chrome。

  • 如需了解可用于调试扩展程序的选项，请参阅调试 教程。
  • Chrome 扩展程序可以访问功能强大的 API，远远超越了开放网络所能提供的 API。 chrome.*API 文档中详细介绍了每个 API。
  • 扩展程序开发概览中提供了数十个额外链接，这些链接指向 与创建高级扩展程序相关的文档。