Firefox扩展开发教程从哪开始学？-建站教程-锦华智联科技

准备工作：安装必要工具
第一步：创建你的第一个扩展
第二步：理解扩展的核心结构
第三步：实现一个弹出窗口
第四步：在后台脚本中处理逻辑
第五步：修改网页内容
第六步：打包和分发你的扩展
进阶学习资源

准备工作：安装必要工具

在开始之前,你需要安装以下软件：

（图片来源网络，侵删）

Firefox 浏览器：确保你安装的是最新稳定版。
Visual Studio Code (VS Code)：一个强大的代码编辑器，强烈推荐。
Git：用于版本控制，虽然不是必须，但强烈建议使用。

第一步：创建你的第一个扩展

最简单的方式是使用 Firefox 官方提供的脚手架工具 web-ext。

a. 安装 Node.js 和 npm

web-ext 是一个 Node.js 包，所以你需要先安装 Node.js，访问 Node.js 官网下载并安装 LTS（长期支持）版本，安装完成后，打开终端或命令提示符，输入以下命令验证安装：

node -v
npm -v

b. 全局安装 web-ext

（图片来源网络，侵删）

在终端中运行以下命令：

npm install --global web-ext

c. 创建扩展项目文件夹

在你的电脑上创建一个新文件夹,my-first-extension，然后进入该文件夹。

mkdir my-first-extension
cd my-first-extension

d. 初始化扩展

（图片来源网络，侵删）

在项目文件夹中,运行以下命令来创建一个基本的扩展结构：

web-ext init

终端会提示你输入一些扩展的基本信息（如名称、描述等），你也可以直接按回车使用默认值，执行完毕后，你的文件夹中会出现几个文件：

manifest.json：扩展的“身份证”，定义了扩展的所有元数据和权限。
background.js：后台脚本，在后台持续运行。
popup/：一个用于弹出窗口的文件夹。
popup.html 和 popup.js：弹出窗口的界面和逻辑。

第二步：理解扩展的核心结构

让我们先看看最重要的文件 manifest.json，用 VS Code 打开它，内容类似这样：

{
  "manifest_version": 2,
  "name": "My WebExtension",
  "version": "1.0",
  "description": "A basic WebExtension",
  "browser_action": {
    "default_popup": "popup.html",
    "default_icon": {
      "16": "icons/icon16.png",
      "48": "icons/icon48.png",
      "96": "icons/icon96.png"
    }
  },
  "icons": {
    "16": "icons/icon16.png",
    "48": "icons/icon48.png",
    "96": "icons/icon96.png"
  },
  "applications": {
    "gecko": {
      "id": "my-first-extension@example.com"
    }
  }
}

关键字段解释：

manifest_version: 目前推荐使用 2（Firefox 也支持 3，但 2 更稳定且兼容性好）。
name, version, description: 扩展的基本信息。
browser_action: 定义了扩展在浏览器工具栏上的图标行为。
- default_popup: 点击图标时弹出的 HTML 文件。
- default_icon: 图标文件。
icons: 扩展在商店和安装管理页面显示的图标。
applications.gecko.id: 扩展的唯一 ID。在开发时，你可以省略这个字段，Firefox 会自动生成一个临时的 ID。 但如果要将扩展发布到 Firefox Add-ons，你必须在这里提供一个固定的 ID。

注意：web-ext init 默认创建的 manifest.json 使用 manifest_version: 2，这是目前最稳妥和广泛支持的选择。manifest_version: 3 是未来的趋势，但目前仍在推广中，部分功能可能不稳定或未实现。

第三步：实现一个弹出窗口

a. 创建图标

在 my-first-extension 文件夹下创建一个名为 icons 的文件夹，并放入三个不同尺寸的 PNG 图片（16x16, 48x48, 96x96），命名为 icon16.png, icon48.png, icon96.png，你可以在网上轻松找到免费图标。

b. 修改 popup.html

打开 popup.html，修改其内容，让它显示一个简单的标题和按钮：

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <style>
    body {
      width: 200px;
      padding: 10px;
      font-family: sans-serif;
    }
    button {
      width: 100%;
      padding: 8px;
      margin-top: 10px;
    }
  </style>
</head>
<body>
  <h3>我的第一个扩展</h3>
  <p>这是一个弹出窗口。</p>
  <button id="myButton">点击我</button>
  <script src="popup.js"></script>
</body>
</html>

c. 编写 popup.js

打开 popup.js，添加按钮点击事件的逻辑：

// 等待 DOM 内容加载完成
document.addEventListener('DOMContentLoaded', function() {
  // 获取按钮元素
  const myButton = document.getElementById('my-button');
  // 为按钮添加点击事件监听器
  myButton.addEventListener('click', function() {
    // 点击后，在控制台打印一条消息
    console.log('按钮被点击了！');
    // 也可以发送消息给后台脚本
    browser.runtime.sendMessage({greeting: "你好，后台脚本！"});
  });
});

第四步：在后台脚本中处理逻辑

后台脚本 (background.js) 是扩展的大脑，它不直接与用户交互，而是负责处理长时间运行的任务，如接收消息、管理标签页等。

修改 background.js，让它能够接收来自弹出窗口的消息：

// 监听来自弹出窗口或其他脚本的消息
browser.runtime.onMessage.addListener((message, sender, sendResponse) => {
  console.log("收到来自弹出窗口的消息:", message);
  // 如果消息是问候语
  if (message.greeting === "你好，后台脚本！") {
    console.log("后台脚本正在处理消息...");
    // 这里可以执行更复杂的逻辑，比如请求网络、操作标签页等
  }
  // 返回一个响应（可选）
  sendResponse({response: "你好，我已经收到你的消息了！"});
});

第五步：修改网页内容

这是扩展最强大的功能之一,我们将修改 manifest.json 来添加必要的权限，然后在后台脚本中注入代码来改变当前网页的背景色。

a. 添加 activeTab 权限

打开 manifest.json，在 browser_action 后面添加 "permissions" 字段：

{
  // ... 其他配置 ...
  "permissions": [
    "activeTab"  // 这个权限允许扩展与当前用户正在查看的标签页交互
  ],
  // ... 其他配置 ...
}

activeTab 是一个非常实用的权限，它只在用户点击扩展图标时临时生效，无需请求所有网站的访问权限，保护了用户隐私。

b. 修改 background.js 来注入脚本

我们修改 background.js，当用户点击扩展图标时，向当前页面注入一个 CSS 样式。

// 监听扩展图标被点击的事件
browser.browserAction.onClicked.addListener((tab) => {
  // 向当前活动的标签页注入一个 CSS 文件
  browser.tabs.insertCSS({
    target: {tabId: tab.id},
    file: "styles/highlight.css"
  });
});
// 保留之前的消息监听器
browser.runtime.onMessage.addListener((message, sender, sendResponse) => {
  console.log("收到来自弹出窗口的消息:", message);
  if (message.greeting === "你好，后台脚本！") {
    console.log("后台脚本正在处理消息...");
  }
  sendResponse({response: "你好，我已经收到你的消息了！"});
});

c. 创建 CSS 文件

在项目根目录下创建一个 styles 文件夹，并在其中创建一个名为 highlight.css 的文件：

/* styles/highlight.css */
body {
  background-color: #ffffcc !important; /* 淡黄色背景 */
}

d. 测试内容修改

确保你的终端还在 my-first-extension 目录下。
运行 web-ext run 命令。
Firefox 会自动打开一个“临时配置文件”，并加载你的扩展。
打开任意一个网页（google.com）。
点击浏览器工具栏上的扩展图标。
如果一切顺利,你会发现整个网页的背景变成了淡黄色！

第六步：打包和分发你的扩展

当你完成开发并准备分享时,可以将扩展打包成一个 .xpi 文件。

a. 打包扩展

在终端中运行：

web-ext build

执行成功后,你会在项目文件夹中看到一个名为 my-first-extension-1.0.zip 的文件。注意： Firefox Add-ons 接受 .zip 文件作为上传格式，所以这个 .zip 文件可以直接发布，如果你想生成传统的 .xpi 文件，可以重命名它。

b. 在 Firefox 中手动安装打包好的扩展

在 Firefox 地址栏输入 about:debugging 并回车。
在左侧菜单中选择 “此 Firefox”。
点击 “临时载入附加组件” 按钮。
在弹出的文件选择窗口中,选择你刚刚生成的 .zip 文件。
扩展就会被加载并显示在列表中。

进阶学习资源

恭喜你,你已经完成了第一个扩展的开发！以下是继续学习的资源：

官方文档 (最重要！)
- Firefox WebExtensions 开发者文档：这是最权威、最全面的资料，所有 API 和概念都有详细说明。
- WebExtensions 示例：GitHub 上的官方示例集合，涵盖了从简单到复杂的各种用例，是学习 API 用法的最佳途径。
社区和工具
- manifest.json v3：如果你想尝试最新的标准，可以查阅 Manifest V3 的文档。
- wxt：一个现代化的、基于 Vite 的 WebExtensions 开发框架，可以极大地提升开发体验，支持热更新等。
- Firefox 开发者博客：关注最新的扩展动态和最佳实践。

祝你开发愉快！