扩展程序剖析

扩展是由一组文件组成的,这些文件被打包用于分发和安装。在本文中,我们将快速浏览扩展中可能存在的文件。

manifest.json

这是每个扩展都必须存在的文件。它包含基本的元数据,例如名称、版本和所需的权限。它还提供指向扩展中其他文件的指针。

manifest 文件还可以包含指向其他几种类型文件的指针

后台脚本

响应浏览器事件的脚本。

图标

用于扩展和它可能定义的任何按钮。

提供各种用户界面组件内容的 HTML 文档。

内容脚本

随扩展一起包含的 JavaScript,您将将其注入到网页中。

Web 可访问资源

使打包的内容可供网页和内容脚本访问。

The components of a web extension. The manifest.JSON must be present in all extensions. It provides pointers to background pages, content scripts, browser actions, page actions, options pages, and web accessible resources. Background pages consist of HTML and JS. Content scripts consist of JS and CSS. The user clicks on an icon to trigger browser actions and page actions and the resulting pop-up consists of HTML, CSS, and JS. Options pages consist of HTML, CSS, and JS.

有关所有详细信息,请参阅 manifest.json 参考页面。

除了 manifest 文件中已列出的内容之外,扩展还可以包含其他 扩展页面 和支持文件。

后台脚本

扩展通常需要响应浏览器中独立于任何特定网页或浏览器窗口生命周期的事件。这正是后台脚本的用途。

后台脚本可以是持久性的或非持久性的。持久性后台脚本在扩展加载时立即加载,并在扩展被禁用或卸载之前一直保持加载状态。此后台脚本行为仅在 Manifest V2 中可用。非持久性后台脚本在需要响应事件时加载,并在空闲时卸载。此后台脚本行为是 Manifest V2 中的一个选项,也是 Manifest V3 中唯一可用的后台脚本行为。

您可以在脚本中使用任何 WebExtension API,前提是您已请求必要的 权限

有关更多信息,请参阅 后台脚本 文章。

您的扩展可以包含各种用户界面组件,这些组件的内容使用 HTML 文档定义。

显示在浏览器窗口左侧、紧邻网页的一个窗格。

当用户点击 工具栏按钮地址栏按钮 时显示的对话框。

选项

用户在浏览器原生扩展管理器中访问您的插件首选项时显示的页面。

对于这些组件中的每一个,您都需要创建一个 HTML 文件,并通过 `manifest.json` 中的特定属性指向它。HTML 文件可以包含 CSS 和 JavaScript 文件,就像普通的网页一样。

所有这些都属于 扩展页面 类型。与普通网页不同,您的 JavaScript 可以使用与后台脚本相同的全部特权 WebExtension API。

扩展程序页面

您还可以在扩展中包含不附加到某些预定义用户界面组件的 HTML 文档。与您为侧边栏、弹出窗口或选项页提供的文档不同,这些文档在 `manifest.json` 中没有条目。但是,它们同样可以访问与后台脚本相同的全部特权 WebExtension API。

您通常会使用 windows.create()tabs.create() 来加载此类页面。

有关更多信息,请参阅 扩展页面

内容脚本

使用内容脚本来访问和操作网页。内容脚本会加载到网页中,并在该特定页面的上下文中运行。

内容脚本是扩展提供的脚本,它们在网页的上下文中运行;这与页面本身加载的脚本不同,包括那些包含在页面内的 <script> 元素中的脚本。

内容脚本可以像页面加载的普通脚本一样查看和操作页面的 DOM。

与普通页面脚本不同,内容脚本可以

内容脚本不能直接访问普通页面脚本,但可以使用标准的 window.postMessage() API 与它们交换消息。

通常,当我们谈论内容脚本时,指的是 JavaScript,但您也可以使用相同的机制将 CSS 注入到网页中。

有关更多信息,请参阅 内容脚本 文章。

Web 可访问资源

Web 可访问资源是您包含在扩展中并希望使其可供内容脚本和页面脚本访问的资源,例如图像、HTML、CSS 和 JavaScript。可以通过特殊的 URI 方案供页面脚本和内容脚本引用那些被设为 Web 可访问的资源。

例如,如果一个内容脚本想在网页中插入一些图像,您可以将它们包含在扩展中并使其 Web 可访问。然后内容脚本可以创建并追加 img 标签,通过 `src` 属性引用这些图像。

有关更多信息,请参阅 "web_accessible_resources" `manifest.json` 键的文档。