在这篇文章中我们将开始创建一个 Firefox 扩展。这个扩展只是给从「firefox.org」或其任意子域加载的任何页面添加一个红色边框。

该示例的源码位于 GitHub: https://github.com/mdn/webextensions-examples/tree/master/borderify.

首先,你需要使用 Firefox 45 或后续版本。

编写扩展

创建一个新的目录并切换到该目录

mkdir borderify
cd borderify

manifest.json

在「borderify」目录内直接创建文件「manifest.json」。文件内容如下:

{

  "manifest_version": 2,
  "name": "Borderify",
  "version": "1.0",

  "description": "Adds a red border to all webpages matching mozilla.org.",

  "icons": {
    "48": "icons/border-48.png"
  },

  "content_scripts": [
    {
      "matches": ["*://*.mozilla.org/*"],
      "js": ["borderify.js"]
    }
  ]

}
  • 前三个键:manifest_versionnameversion 是强制的,包含扩展的基本元数据.
  • description 是可选的,但建议使用「该描述将显示在附加组件管理器上」.
  • icons 是可选的,但建议使用「它允许你给扩展指定一个图标,将显示在附加组件管理器上」.

这里最有趣的键是content_scripts,它告诉 Firefox 加载脚本到其 URL 匹配特定模式的网页。本例中,我们要求 Firefox 加载脚本「borderify.js」到任何来自「mozilla.org」或其子域的HTTP或HTTPS页面。

某些情况下,你需要给你的扩展指定一个 ID。如果你确实需要指定一个附加组件 ID,请在 manifest.json 中添加application键,并设置其 gecko.id 属性:

"applications": {
  "gecko": {
    "id": "borderify@example.com"
  }
}

icons/border-48.png

扩展应该有一个图标。这将显示在附加组件管理器加载项的列表中。我们的 manifest.json 的要求,我们将不得不有一个图标"icons/border-48.png".

在 "borderify"  目录下直接创建 "icons" 目录,命名为 "border-48.png". 你可以使用 我们例子中的, 来自谷歌材料设计中的图标, 遵循 Creative Commons Attribution-ShareAlike 协议.

如果您选择使用自己的图标,它应该是48×48像素。你也可以提供一个96x96的像素图标,对于高分辨率显示器,如果你这样做,将被指定为图标的96属性的manifest.json对象:

"icons": {
  "48": "icons/border-48.png",
  "96": "icons/border-96.png"
}

或者,你可以在这里提供一个SVG文件,它会被正确缩放。

borderify.js

最后在 "borderify"  目录下面直接创建 "borderify.js"  并写入下面的内容:

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

该脚本将被加载到匹配 manifest.json 文件中 content_scripts 的键给出的模式匹配。该脚本直接访问该文档,就像在页面加载自己的脚本。

测试效果

首先,仔细检查文件是否在正确的位置:

borderify/
    icons/
        border-48.png
    borderify.js
    manifest.json

打开火狐的 "about:debugging" 页面, 点击 "临时加载附加组件按钮" 并选择你的附加组件目录:

附加组件将会被安装,直接下次重启浏览器失效.

现在尝试访问"firefox.com.cn", 你将会在页面上看到有个红色的边框

尝试一下编辑内容脚本更改边框的颜色,或做页面内容别的修改,保存内容脚本,然后通过单击 about:debugging 页面下的 “刷新” 按钮重新加载附加的文件。你可以马上看到的变化:

打包和发布

对于其他人使用你的插件,您需要打包,并将其提交给Mozilla签名。要了解更多有关,请参考 "发布你的WebExtension".

下一步

现在,你已经在开发Firefox的一个Web扩展的过程中得到了一些想法,尝试:

文档标签和贡献者

 此页面的贡献者: liweiwp, XanderChen, xcffl, lightsing, matsuz, GrayLight
 最后编辑者: liweiwp,