剖析WebExtension

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

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

manifest.json

这是惟一一个在每个 WebExtension 里面必须存在的文件。它包含了关于这个扩展插件基本的元数据(metadata),比如它的名字、版本和所需权限。 它需要版本信息与权限。并且,他也对 WebExtension中其他文件进行了链接。

浏览其的详细信息请到 manifest.json

Background scripts

WebExtension常常需要在浏览器窗口或特定网页的存活期中独立的维持一种长期的状态或者执行长期的操作。这时候就需要用到background scripts了。

background scripts将在插件加载时开始运行,在插件被禁用或者被卸载时停止。只要获得了必要的权限,就可以使用任何 WebExtension APIs中的脚本。

添加background scripts

你可以通过在 manifest.json 中添加关键字 background 来引入background scripts:

// manifest.json

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

可以添加多份background scripts:此时,就像同一个网页中的多个脚本一样,他们运行在同一环境中。

background scripts的运行环境

DOM APIs

background scripts在特定后台页面的环境中运行。 后台页面为其提供了全局 window 也提供了所有的标准 DOM API。

你不必自己配置后台页面。如果你引入了一个后台脚本,一个空白后台页面会自动为你创建出来。

而如果你想要自己配置后台页面,就需要在 manifest.json 中这样配置:

// manifest.json

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

WebExtension APIs接口

只要扩展获得了必要的权限,就可以使用所有的API WebExtension APIs

跨域访问

Background scripts 可以向任何拥有 host permissions 的主机发送XML HTTP Request请求。

浏览器动作

如果扩展定义了浏览器动作并且没有弹出窗,这时可以通过 onClicked 对象来监听浏览器动作按钮的点击动作:

browser.browserAction.onClicked.addListener(handleClick);

网页内容

background scripts无法获得页面的直接权限。不过,他们可以在页面中加载 content scripts (Content scripts)并且可以通过message-passing API与Content scripts通信。

内容安全策略

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

Content scripts

Content scripts被用来获取、操作页面。Content scripts会被加载到页面中并运行在页面的特定环境下。

Content scripts是由扩展提供的脚本,与页面本身的脚本以及<script>标签中的脚本是不同的。

Content scripts可以像普通脚本一样获取、操作页面的 DOM。

与普通的页面内脚本不同,Content scripts可以:

Content scripts无法直接获取页面脚本,但可以通过 window.postMessage() API 来与之传递信息。

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

详情请见 content scripts

Browser actions

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

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

【以下部分至下一个警告处为当前英文文档中不存在的内容,尚不清楚是否保留】

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

通过 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来在代码中改变他们的值。

弹出窗口

弹出窗口通过一个HTML页面定义,也可以包含CSS和JS文件,只是个普通的页面。如果非要说与普通页面不同的话就是在页面中运行的JS可以在插件取得权限的情况下使用任意WebExtension APIs

从Firefox48版本开始,你可以引入样式表使你的弹出窗口看起来跟浏览器UI一模一样。如果要这么做的话,就在你的browser_action关键字中引入"browser_style": true.

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.

使用 window.close()可以关闭一个弹窗。【注意】Firefox47以上版本才支持此命令。

弹出窗口的内容安全策略:限制可以加载其他资源的源,并且拒绝一些不安全的操作比如使用eval()函数。

【以上部分至上一个警告处为当前英文文档中不存在的内容,尚不清楚是否保留】

如果你没有配置弹出窗,当用户点击这个按钮的时候,一个事件会被发送到扩展中,你可以通过  browserAction.onClicked 监听这个浏览器动作。

browser.browserAction.onClicked.addListener(handleClick);

如果配置了弹出窗,那么用户点击事件不会被发送,而是会打开弹出窗。用户可以直接与弹出窗交互并且可以点击其它区域退出弹出窗。

查看更多关于Browser actions的信息。

Page actions

Page actions与browser actions 极为相似,它们的不同在于:

  • browser actions始终运行,因为或多或少总有些全时段可用的动作需要它的存在
  • page actions则只是为了在特定页面进行会话的动作,所以只在特定标签页激活的时候运行

为了强调page actions是严格的捆绑在特定标签页的,它们的显示地点放在了地址栏而不是主工具栏:

在通过manifest.json文件中page_action关键字可以指定Page actions ,并且用pageActionAPI进行操作。

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

与browser actions不同的是,它们在默认情况下是隐藏的,你可以通过命令pageAction.show()pageAction.hide()在特定的标签页中进行显示和隐藏操作。

Options pages

OPtions pages让你可以为你的WebExtension定义用户可更改的偏好设置。用户可以从浏览器的插件管理中进入某个插件的Option page:

通过这种方式用户可以进入页面,并且在这中方式中,新出现的页面和浏览器的用户界面是集成在一起的,而不会另开一个窗口。

创建一个options page需要做以下几件事:

  • 使用一个HTML页面定义这个页面。这个页面可以包含CSS和JS文件,它就是一个普通的页面。在页面中运行的JS可以在插件取得权限的情况下使用任意WebExtension APIs。另外,你可以使用storage API 来保存设置。
  • 把这些文件打包进你的插件
  • 在manifest.json文件中引入关键字options_ui,并为其设定页面URL。

你可以通过命令runtime.openOptionsPage()打开页面。

Option pages的内容安全策略:限制可以加载其他资源的源,并且拒绝一些不安全的操作比如使用eval()函数。

有关详情请查看 内容安全策略

Web accessible resources

Web accessible resources是指像图片、HTML、CSS和JavaScript之类的,引入插件并且想要获得访问权限的内容脚本和页面脚本。成为web-accessible的资源可以在页面脚本和内容脚本中通过使用特定的URL方案来引用。
举个例子来说,如果一个内容脚本想要把一些图片插入网页,你可以在插件中引入它们并且使他们成为web-accseeible。接下来内容脚本就可以创建并追加包含src属性的img标签了。

 

 

文档标签和贡献者

 此页面的贡献者: wangtonghe, zhzhch335, CXWorks, EdgeBoY, dhq8, onbug
 最后编辑者: wangtonghe,