扩展程序的构成

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

manifest.json

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

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

后台脚本

响应浏览器事件的脚本。

图标

用于扩展程序及其可能定义的任何按钮。

提供各种用户界面组件内容的 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参考页面。

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

后台脚本

扩展程序通常需要响应浏览器中发生的事件,而这些事件独立于任何特定网页或浏览器窗口的生命周期。这就是后台脚本的作用。

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

如果你已请求必要的权限,则可以在脚本中使用任何WebExtension API

请参阅后台脚本文章以了解更多信息。

你的扩展程序可以包含各种用户界面组件,其内容使用 HTML 文档定义

显示在浏览器窗口左侧、网页旁边的窗格。

当用户单击工具栏按钮地址栏按钮时,可以显示的对话框

选项

当用户在浏览器的原生附加组件管理器中访问你的附加组件的首选项时显示的页面。

对于每个组件,你创建一个 HTML 文件,并使用manifest.json中的特定属性指向它。HTML 文件可以包含 CSS 和 JavaScript 文件,就像普通的网页一样。

所有这些都是扩展程序页面的一种类型。与普通网页不同,你的 JavaScript 可以使用与后台脚本相同的特权 WebExtension API。

扩展程序页面

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

你通常会使用windows.create()tabs.create()加载这样的页面。

请参阅扩展程序页面以了解更多信息。

内容脚本

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

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

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

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

  • 发出跨域 XHR 请求。
  • 使用WebExtension API的一个小子集。
  • 与它们的后台脚本交换消息,并可以通过这种方式间接访问所有 WebExtension API。

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

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

请参阅内容脚本文章以了解更多信息。

Web 可访问资源

Web 可访问资源是你包含在扩展程序中并希望使其可供内容脚本和页面脚本访问的资源(例如图像、HTML、CSS 和 JavaScript)。可访问的 Web 资源可以通过特殊的 URI 方案由页面脚本和内容脚本引用。

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

要了解更多信息,请参阅"web_accessible_resources"manifest.json键的文档。