创建项目文件夹

mkdir BitPricez

创建manifest.json

包含了manifest版本, 扩展名称, 版本号, 描述, 扩展中显示的图标, 脚本主文件代码, 匹配的网站, 以及作者id

{
    "manifest_version": 2,
    "name": "BitPricez",
    "version": "1.0",
    "description": "Display bitcoin price.",
  
    "icons": {
      "48": "icon48.png",
      "96": "icon96.png"
    },
  
    "content_scripts": [
      {
        "matches": ["*://*.firefox.com.cn/*"],
        "js": ["index.js"]
      }
    ]
    ,"applications": {
        "gecko": {
            "id": "zszen@hotmail.com"
        }
    },

    "homepage_url": "https://zszen.github.io"
  }

创建js

创建个index.js

document.body.style.border = "5px solid red";

直接设置5像素的红色边框

运行

打开firefox
输入about:debuging
找到临时扩展
点击临时载入附加组件
选择index.js
如果代码未出错, 可以看到被加载进去了

访问测试

进入firefox.com.cn看一眼是否成功出现边框

结构

BitPricez/
    icon48.png
    icon96.png
    index.js
    manifest.json

代码更新

每次代码更新后, 都要reload一次插件, 否则无效

扩展tab按钮点击按钮配置方式

    "browser_action": {
        "default_icon": "icon32.png",
        "default_title": "BitPricez"
    },

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

https://github.com/mdn/webextensions-examples/tree/master/bookmark-it