架构概述

# 概览

Chrome 扩展由不同的部分组成，本页描述了扩展的结构、每个部分扮演的角色以及它们如何协同工作，并不会描述如何编写扩展的代码级细节。

如果您不熟悉 Chrome 扩展开发，我们建议您先阅读 Extensions 101 和开发基础。

# Chrome 扩展的结构

以下部分描述了组成 Chrome 扩展的文件。以下是 Chrome 扩展文件结构的示例：

# Manifest

manifest(manifest.json) 是 Chrome 扩展的配置文件，它是一个必需的 JSON 文件，必须位于项目的根目录，它为浏览器提供了扩展的蓝图，其中包含重要信息，例如：

• 扩展的名称、它的作用描述、当前版本号以及要使用的图标。
• 扩展所需的 Chrome API 密钥和 权限 permissions。
• 分配为 service worker 的文件、popup HTML 文件、选项页（options page）、内容脚本（content scripts）等。

Manifest keys 一文包含默认和可选属性的完整列表。完整 Manifest 示例。

# service worker

扩展的 Service Worker（service-worker.js）是浏览器在后台运行的基于事件的脚本，通常用于处理数据，协调扩展不同部分的任务，以及作为扩展的事件管理器。例如，Service Worker 可以在首次安装扩展、创建新选项卡、添加新书签、单击扩展工具栏图标等时侦听并对事件做出反应。

Service Worker 可以访问所有的 Extension API，但作为 Worker 类型，它不能使用文档的全局 Window 对象提供的 DOM API。它也在自己的环境中运行，因此它不能直接修改网页的内容。

有关详细信息，请参阅处理扩展 Service Worker 中的事件。

# 内容脚本

扩展使用内容脚本（content-script.js）将代码注入主机页面，它们允许扩展与浏览器中的页面进行交互和修改，例如，它们可以在页面上插入一个新元素、更改网站的样式、修改 DOM 等。

内容脚本与主机页共享对同一 DOM 树的访问，但在单独的 JavaScript 环境中运行（扩展的隔离世界）。它们还可以访问有限数量的ChromeAPI。有关详细信息，请参阅了解内容脚本。

# 扩展 HTML 页面

根据设计，扩展可以有不同的 HTML 页面。所有扩展 HTML 文件都可以使用Chrome API，但不能包含内联 Javascript；它们必须指向 JavaScript 文件。两种最常见的 HTML 页面是：

弹出窗口 ：许多扩展使用弹出窗口（popup.html）来提供功能，例如显示选项卡列表，或有关当前选项卡的附加信息。用户可以通过单击扩展工具栏图标轻松找到它。当用户导航离开时，它会自动关闭。

选项页面 ：选项页面（options.html）为用户提供了自定义扩展的方法，例如选择扩展将在哪些站点上运行，用户可以通过几种方式访问选项页面，如查找选项页面 中所述。

其他扩展 HTML 页面包括Chrome 覆盖页面、沙盒页面 或为特定目的（如入职用户）而包含的任何自定义页面。

# 其他资源

扩展可以包含许多类型的资源，例如图像和字体，但Chrome Web Store中托管的扩展只需要扩展图标。此外，Chrome Web Store 策略 要求扩展包含扩展在扩展包中执行的所有代码。

# 他们如何一起工作

在本节中，我们将描述这些扩展组件如何通信、存储数据和共享对资源的访问。

# 发送消息

很多时候，内容脚本或其他扩展页面需要从扩展 Service Worker 发送或接收信息。在这些情况下，任何一方都可以监听从另一端发送的消息，并在同一通道上做出响应。扩展可以发送一次性请求或建立长期连接以支持多条消息。

有关详细信息，请参阅消息传递。

# 存储数据

Chrome 为扩展提供专门的存储 Storage API，可用于所有扩展组件。它包括用于特定用例的四个独立存储区域和一个事件侦听器 每当数据更新时跟踪。例如，当您在弹出窗口中保存更改时，扩展 Service Worker 可以使用指定的逻辑进行响应。

See Storage API for usage and code samples. 有关用法和代码示例，请参阅 Storage API。

# 引用扩展资源

扩展 HTML 页面可以使用与常规 HTML 页面相同的标签来添加扩展资产。内容脚本还可以访问扩展资源，例如图像和字体，但需要额外的步骤 这在访问内容脚本中的扩展文件 中描述。

# 下一步

Now that you have completed the Getting Started guides and understand the structure of a Chrome extension, you are ready to dive deeper with the following resources:

现在您已经完成了 入门指南 并了解了 Chrome 扩展的结构，您可以使用以下资源深入了解：

• 了解可以在 Chrome 扩展中使用的UI 元素。
• 浏览Chrome 扩展功能 的完整列表。
• 了解构建尊重用户隐私 的安全扩展的最佳实践。