剖析WebExtension

WebExtension是一个打包好的、可供发布的安装包，该安装包中包含若干文件。 本文中，我们快速地介绍一遍安装包内可能出现的文件。

每个WebExtension必须包含一个名为"manifest.json"的文件，该文件可以指向如下类型的文件：

• background pages: 执行一个长时间运行的逻辑
• content scripts: 与网页进行交互
• browser action files: 在工具栏中添加按钮
• page action files: 在地址栏添加按钮
• options pages: 为用户定义一个可浏览的UI界面，可以改变插件的设置
• web-accessible resources: 使打包好的内容可用于网页与目录脚本

manifest.json文件

这是惟一一个可以在每个网页插件里面可以被展现的文件。它包含了关于这个扩展插件基本的元数据（metadata），正如它的名字一样。 它需要版本信息与权限。它同时提供乐到其他扩展插件的“地址指针“ 。

浏览全部的详细信息请到 manifest.json 。

后台脚本

网页插件经常需要长时间保持运行状态或者重复某些操作，并且独立于页面或者窗口的生存期。这时你需要后台脚本（"background scripts"）。

后台脚本将在插件被加载时开始运行，直到插件被禁用或者被卸载。只要获得了相应的权限，就可以使用相应的API WebExtension APIs。

指定后台脚本

你可以通过在 manifest.json 中添加关键字 background 来指定后台脚本：

// manifest.json

"background": {
  "scripts": ["background-script.js"]
}

可以添加多份后台脚本：此时，就像同一个网页中的多份代码一样，他们运行在同一环境中。

后台脚本的运行环境

DOM APIs

后台脚本在后台页面中运行。 后台页面为其提供了 window API 和 标准的 DOM API。

你不必实现自己的后台页面。此时，会有默认的空页面作为后台页面。

如果实现了自己的后台页面，需要在 manifest,json 中这样配置:

// manifest.json

"background": {
  "page": "background-page.html"
}

WebExtension APIs接口

只要扩展获得了相应的权限，就可以使用相应的API WebExtension APIs。

跨域访问

只要扩展取得了 host permissions 即可发送跨域访问。

浏览器动作

如果扩展定义了浏览器动作却没有弹出窗，这时可以通过 onClicked 来监听浏览器动作：

chrome.browserAction.onClicked.addListener(handleClick);

网页内容

后台脚本无法直接操作标签页。不过，他们可以在标签页中加载 content scripts （内容脚本）并且可以通过信息传递API（message-passing API）与内容脚本通信。

内容安全策略

根据内容安全策略，后台脚本一些可能危险的操作会被禁止，例如使用 eval()。 有关详情请查看 内容安全策略 。

内容脚本

内容脚本被用来获取、操作标签页。内容脚本会被加载到标签页中并运行在标签页的环境下。

内容脚本是由扩展提供的脚本，与标签页本身的脚本以及<script>标签中的脚本是不同的。

内容脚本可以像普通脚本一样获取、操作标签页的 DOM。

与普通的标签页内脚本不同，内容脚本可以：

• 执行跨域访问
• 使用 WebExtension APIs 的子集
• 通过与后台脚本交换信息的方式使用完整的 WebExtension APIs

内容脚本无法直接获取标签页脚本，只可以通过 window.postMessage() API 来与之传递信息。

通常情况下，我们讨论的内容脚本是指 javascript 脚本，但是可以用同样的机制来注入 CSS 文件。

详情请见 content scripts 。

浏览器动作

浏览器动作是指通过在工具栏上添加扩展的图标，使得用户可以点击并与之交互。

你可以使用html、css、javascript来自定义一个弹出窗。

如果你没有实现弹出窗，那么可以通过 browserAction.onClicked 的API来监听这个浏览器动作。

chrome.browserAction.onClicked.addListener(handleClick);

如果实现了弹出窗，那么用户点击事件不会被分派到API中，而是会打开弹出窗。用户可以直接与弹出窗交互并且可以点击其它区域退出弹出窗。

注意：一个扩展只有一个浏览器动作。

配置浏览器动作

通过 manifest.json 中的 browser_action 关键字可以定义浏览器动作的图标、标题与弹出窗。如下所示：

"browser_action": {
  "default_icon": {
    "19": "button/geo-19.png",
    "38": "button/geo-38.png"
  },
  "default_title": "Whereami?",
  "default_popup": "popup/geo.html"
}

唯一强制的关键字是 default_icon. 你可以通过 browserAction API来在代码中改变他们的值。

弹出窗口

The popup is specified as an HTML file, which can include CSS and JavaScript files, just like a normal web page. Unlike a normal page, though, the JavaScript can use all the WebExtension APIs that the extension has permissions for.

Starting in Firefox 48, you can ask the browser to include a stylesheet in your popup that will make it look consistent with the browser's UI. To do this, include "browser_style": true in your browser_action key.

To close the popup programmatically, call window.close() from a script running in the popup. Note that in Firefox, this is only supported since Firefox 47.

Popups have a Content Security Policy that restricts the sources from which they can load resources, and disallows some unsafe practices such as the use of eval(). See Content Security Policy for more details on this.

• Read about debugging popups.

某页动画

Page actions are like browser actions in most respects, except that:

• browser actions are displayed all the time, and are for actions that are applicable more or less all the time
• page actions are for actions which only make sense on certain pages, and are only displayed when those tabs are active.

To emphasise that page actions are closely tied to particular pages, they're shown in the address bar, rather than the main toolbar:

Page actions are specified using the page_action key in manifest.json, and can be manipulated using the pageAction API.

Unlike browser actions, they're hidden by default, and you call pageAction.show() and pageAction.hide() to show or hide them in specific tabs.

• See an example add-on that includes a page action.

页面相关

Options pages enable you to define preferences for your WebExtension that your users can change. Users can access the options page for an add-on from the browser's add-ons manager:

The way users access the page, and the way it is integrated into the browser's user interface, will vary from one browser to another.

To create an options page:

• write an HTML file defining the page. This file can include CSS and JavaScript files, just like a normal web page. JavaScript running in the page can can use all the WebExtension APIs that the add-on has permissions for. In particular, you can use the storage API to persist preferences.
• package these files in your add-on
• include an options_ui key in manifest.json, giving it the URL to the page.

You can open the page programmatically by calling runtime.openOptionsPage().

Options pages have a Content Security Policy that restricts the sources from which they can load resources, and disallows some unsafe practices such as the use of eval(). See Content Security Policy for more details on this.

网页资源

Web accessible resources are resources such as images, HTML, CSS, JavaScript, that you include in the extension and want to make accessible to content scripts and page scripts. Resources which are made web-accessible can be referenced by page scripts and content scripts using a special URI scheme.

For example, if a content script wants to insert some images into web pages, you could include them in the extension and make them web accessible. Then the content script could create and append img tags which reference the images via the src attribute.