自从 Firefox 计划放弃原有的扩展，转而支持 WebExtension 后，WebExtension 已经成为主流。Firefox 自 45 开始支持 WebExtension，并逐渐增加各种 API。目前为止，WebExtension 已被大部分主流浏览器支持。

阅读此文章前，您应该有一定 HTML、CSS、JS 基础。如果想知道如何学习 CSS/JS，请移步 w3school

简述

WebExtension（以下简称 “扩展”）由 HTML、CSS、JS 构成，除此之外不需要其他技术。这极大的降低了入门门槛，也方便了跨平台兼容性。

扩展目前可以实现修改页面、修改请求、修改部分浏览器内容（例如书签），目前为止不支持修改浏览器 GUI 部分和一些特殊页面。在 Firefox 上，可以通过 jsctypes 实现更底层的功能（Mozilla 暂无移除此特性的计划）

编写 manifest

manifest 是一个 JSON 文件，用于告诉浏览器一些基本信息，例如扩展要求的浏览器版本、权限等。manifest.json 所有可用的键请参考 MDN 上介绍WebExtensions的页面。下面讲讲常用的几个东西：

• background

用于指示浏览器后台运行的内容，可以是一连串脚本，也可以是一个 HTML 页面。这个页面对用户不可见，并支持运行所有 API。background 的作用主要是一些 API 事件的绑定。例如，Adblock（广告屏蔽扩展）可以借此绑定浏览器的 “发起请求” 事件并响应，达到屏蔽广告的目的。

同时，由于 content_scripts（嵌入页面的 JS）一般与扩展不在一个 URL 下，因此无法读写一些扩展的数据，这时候常常通过 background 间接读取。

• content_scripts

将一些 JS 嵌入到网页中，用于修改网页等操作，这里的 JS 可以直接访问页面的内容，但不可被网页上的其他 JS 访问。

• manifest_version

必须为 2，暂时没有其他用处

• permissions

用于申请 browser.* 的 API 权限，具体内容可以在这里查看

编写扩展

编写完 manifest 后，就可以开始编写具体的功能。扩展可用的 API 十分丰富。下面列举一些我在编写扩展时的心得：

• 使用browser.runtime.sendMessage与 background 通信

• 在大部分地方使用 Promise 方便编写

• 一般用 IndexedDB 储存大量数据，使用 localStorage 储存少量数据

多语言支持

支持多语言是一个好习惯。扩展本身也有相关的功能，可以方便的实现多语言的支持。

在_locales目录下，为相应的语言建立文件夹，例如 “zh-CN”，在语言文件夹里新建一个名为messages.json的文件。您可以参照此文件来编写语言文件。

在 manifest.json 中，可以通过__MSG_名称__来获取语言文字。例如__MSG_simpleKey__对应语言文件中键为simpleKey的条目。

在其他页面中，则通过browser.i18n.getMessage来获取语言文字。

调试你的扩展

用 Firefox 浏览器打开about:debugging，点击上方的 “临时加载附加组件”，选择 manifest.json，即可将扩展载入到 Firefox 中。需要注意的是，Firefox 载入同一个开发中的扩展，ID 是不变的。

勾上 “启用附加组件调试” 后，还可以对 background 页面进行调试，不过，控制台中会出现很多无关内容，请注意区别哪些内容是与你的扩展相关。