Your first WebExtension

在这篇文章中我们将从头到尾创建一个完整的Firefox WebExtension。这个附加组件将会给从“mozilla.org”或其任何子域（如developer.mozilla.org）加载的任何页面增加了一个红色边框。

案例源码: https://github.com/mdn/webextensions-examples/tree/master/borderify.

首先，你必须使用Firefox 45或更新版本。

部分Windows机器可能设置隐藏文件名扩展名，如果手动创建，可能是 mainfest.json.txt，所以请使用编辑器创建文件并注意保存的扩展名。

推荐使用IDE，文件保存为UTF-8无BOM格式，中文需要转换成Unicode编码（\u开头）。

这样可以避免很多不必要的错误。

创建WebExtension

创建我们的WebExtension项目目录

mkdir borderify # 创建目录
cd borderify # 切换到该目录

manifest.json

在 borderify 目录内直接创建 "manifest.json"文件，并写入下面的内容（直接拷贝也可以）。

{

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

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

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

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

}

manifest_version, name, version, 这三个键值是强制的，包含附加组件的基本元数据.
description 是可选的, 但推荐使用，将会展示在附加组件管理器上.
icons 是可选的, 但推荐使用，允许你为附加组件指定一个icon, 将会展示在附加组件管理器上.

最有趣的键是 content_scripts, 它告诉Firefox通过模式匹配网页的URL并加载脚本。这个案例中，我们要求Firefox将所有来自“mozilla.org”或及其子域的HTTP或HTTPS页面加载一个“borderify.js”脚本。

如果你使用Firefox48之前的版本，你需要添加额外的键 applications:

"applications": {
  "gecko": {
    "id": "[email protected]",
    "strict_min_version": "42.0",
    "strict_max_version": "50.*",
    "update_url": "https://example.com/updates.json"
  }
}

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文件，它会被正确缩放。

学习更多关于 icons.

borderify.js

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

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

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

学习更多关于content scripts的内容.

测试效果

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

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

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

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

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

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

学习更多关于加载add-ons

打包和发布

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

下一步

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