开发一个简单的WebExtension

首先需要准备一个45版本以上的火狐浏览器用于开发扩展。

1.需要编写的第一个文件是我们的manifest.json。这个文件是整个扩展的核心，是一个按照json格式写成的文件。

既然是json格式就要有相应的key和value，这里列出扩展中常用的几个key。

"manifest_version"   此json文件的版本

"name" 扩展的名称

"version" 版本号。以上的3个key是强制需要的。 

"description"对插件的描述，会显示在浏览器中。

"icons": {
    "48": "这里是图标文件的相对json文件的路径"
  }

图标的路径，可以提供48*48或者96*96两种。

"content_scripts": [
    {
      "matches": ["需要运用扩展的网页"],
      "js": ["js文件的路径"]
    }
  ]

加载脚本文件到其匹配到的URL的网页

"applications": {
  "gecko": {
    "id": "组件的id"
  }
}

设置组件的id

2.脚本文件test.js,负责实现组件要实现的功能

复制document.body.style.border = "5px solid red";他会在json文件设置的地方访问js文件。这个js文件的作用是在你想要的页面显示一个5px的红色边框。

3.准备组件的文件夹

创建文件夹extension按照以下方式放入文件

extension-
    icons-
        48.png
    test.js
    manifest.json

4.打开火狐浏览器在地址栏输入about:debugging，进入调试页面载入临时组件，成功载入后就可以看到效果了。