你的第一个扩展

注意：如果您熟悉浏览器扩展的基本概念，请跳过本节，查看扩展文件是如何组合在一起的。然后，使用参考文档开始构建您的扩展。访问Firefox 扩展工作坊，了解有关测试、发布和 Firefox 扩展工作流程的更多信息。

本文逐步介绍了从头到尾创建 Firefox 扩展的过程。该扩展会为从“mozilla.org”或其任何子域名加载的任何页面添加红色边框。

此示例的源代码位于 GitHub 上：https://github.com/mdn/webextensions-examples/tree/main/borderify。

编写扩展

在合适的位置（例如 Documents 目录中）创建一个名为 borderify 的新目录并导航到该目录。您可以使用计算机的文件浏览器或命令行终端执行此操作。了解如何使用命令行终端是一项方便的技能，因为它有助于您更高级的扩展开发。使用终端，您可以像这样创建目录

bash
mkdir borderify
cd borderify

manifest.json

使用合适的文本编辑器，在“borderify”目录下直接创建一个名为“manifest.json”的新文件。赋予它以下内容

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_version、name 和 version 是必须的，包含扩展的基本元数据。
  • description 是可选的，但建议使用：它显示在附加组件管理器中。
  • icons 是可选的，但建议使用：它允许您为扩展指定一个图标，该图标将显示在附加组件管理器中。

这里最有趣的键是content_scripts，它告诉 Firefox 将脚本加载到其 URL 与特定模式匹配的网页中。在本例中，我们要求 Firefox 将名为“borderify.js”的脚本加载到从“mozilla.org”或其任何子域名提供的任何 HTTP 或 HTTPS 页面中。

警告：在某些情况下，您需要为扩展指定 ID。如果您确实需要指定附加组件 ID，请在 manifest.json 中包含 browser_specific_settings 键并设置其 gecko.id 属性

json
"browser_specific_settings": {
  "gecko": {
    "id": "[email protected]"
  }
}

icons/border-48.png

扩展应该有一个图标。这将显示在附加组件管理器中扩展列表的旁边。我们的 manifest.json 承诺我们将在“icons/border-48.png”处有一个图标。

在“borderify”目录下直接创建“icons”目录。在其中保存一个名为“border-48.png”的图标。您可以使用我们示例中的图标，该图标取自 Google Material Design 图标集，并根据知识共享署名-相同方式共享许可的条款使用。

如果您选择提供自己的图标，它应该是 48x48 像素。您还可以提供 96x96 像素的图标，用于高分辨率显示，如果您这样做，它将被指定为 manifest.json 中 icons 对象的 96 属性

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

或者，您可以在此处提供 SVG 文件，它将被正确缩放。（不过：如果您使用 SVG 并且您的图标包含文本，您可能需要使用 SVG 编辑器的“转换为路径”工具来扁平化文本，以便它以一致的大小/位置进行缩放。）

borderify.js

最后，在“borderify”目录下直接创建一个名为“borderify.js”的文件。赋予它此内容

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

此脚本将加载到与 content_scripts manifest.json 键中给定的模式匹配的页面中。该脚本可以直接访问文档，就像页面本身加载的脚本一样。

试用

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

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

安装

在 Firefox 中：打开about:debugging 页面，点击此 Firefox 选项，点击加载临时附加组件按钮，然后选择扩展目录中的任何文件。

扩展现在已安装，并在您重新启动 Firefox 之前保持安装状态。

或者，您可以使用web-ext 工具从命令行运行扩展。

测试

注意：默认情况下，扩展在隐私浏览中不起作用。如果您想在隐私浏览中测试此扩展，请打开“about:addons”，点击扩展，然后为在隐私窗口中运行选择允许单选按钮。

现在访问“https://www.mozilla.org/en-US/”下的页面，您应该会看到页面周围的红色边框。

Border displayed on mozilla.org

注意：不过，请不要在“addons.mozilla.org”上尝试！内容脚本目前在该域上被阻止。

尝试进行一些实验。编辑内容脚本以更改边框的颜色，或对页面内容执行其他操作。保存内容脚本，然后通过点击“about:debugging”中的重新加载按钮重新加载扩展的文件。您可以立即看到更改。

打包和发布

为了让其他人使用您的扩展，您需要对其进行打包并提交给 Mozilla 进行签名。要了解有关此方面的更多信息，请参阅“发布您的扩展”。

接下来做什么？

现在您已经对为 Firefox 开发 WebExtension 的过程有了初步了解