自从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的页面。下面讲讲常用的几个东西：

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

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

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

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

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

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

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

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

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

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

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

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