架构概述
Chrome 扩展架构的高级解释。
Published on • Updated on
概览
Chrome 扩展由不同的部分组成,本页描述了扩展的结构、每个部分扮演的角色以及它们如何协同工作,并不会描述如何编写扩展的代码级细节。
如果您不熟悉 Chrome 扩展开发,我们建议您先阅读 Extensions 101 和开发基础。
Chrome 扩展的结构
以下部分描述了组成 Chrome 扩展的文件。以下是 Chrome 扩展文件结构的示例:
![An example of a Chrome Extension directory structure](https://wd.imgix.net/image/BhuKGJaIeLNPW9ehns59NfwqKxF2/Txq5CxeXjQz7i4wmP8zO.png?auto=format)
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 等。
主机页面 Host pages 是内容脚本与之交互的网站。扩展可以通过指定 匹配模式 来选择内容脚本应该在哪些网站上运行。
内容脚本与主机页共享对同一 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 扩展功能 的完整列表。
- 了解构建尊重用户隐私 的安全扩展的最佳实践。
Updated on • Improve article