Firefox 扩展开发最佳实践指南

2025-05-09 19:53:49作者：滕妙奇

1. 项目介绍

Firefox 扩展（原名 Firefox Add-ons）是用于增强 Firefox 浏览器功能的软件。这些扩展可以自定义浏览器的功能，提供新的功能或者改善用户体验。本项目（https://github.com/mozilla/addons）是 Mozilla 官方提供的 Firefox 扩展开发平台，旨在帮助开发者创建和发布扩展。

2. 项目快速启动

环境准备

安装最新版本的 Firefox 浏览器。
安装 Firefox Developer Tools。

创建扩展

在项目目录下创建一个新文件夹，例如 my-addon。

在文件夹内创建一个名为 manifest.json 的文件，并填入以下内容：

{
    "manifest_version": 2,
    "name": "示例扩展",
    "version": "1.0",
    "description": "一个示例 Firefox 扩展。",
    "permissions": [
        "activeTab"
    ],
    "background": {
        "scripts": ["background.js"],
        "persistent": false
    },
    "browser_action": {
        "default_popup": "popup.html",
        "default_icon": {
            "16": "images/icon16.png",
            "48": "images/icon48.png",
            "128": "images/icon128.png"
        }
    },
    "icons": {
        "16": "images/icon16.png",
        "48": "images/icon48.png",
        "128": "images/icon128.png"
    }
}

在 my-addon 文件夹内创建 background.js 和 popup.html 文件。

background.js 内容如下：

browser.browserAction.onClicked.addListener((tab) => {
    browser.tabs.executeScript({
        file: 'content.js'
    });
});

popup.html 内容如下：

<!DOCTYPE html>
<html>
<head>
    <title>示例扩展</title>
</head>
<body>
    <h1>示例扩展</h1>
    <button id="my-button">点击我</button>
    <script src="popup.js"></script>
</body>
</html>

在 my-addon 文件夹内创建 images 文件夹，并放入相应的图标文件。

加载扩展

打开 Firefox 浏览器，进入 about:debugging。
点击 "加载临时扩展"，选择 my-addon 文件夹。
加载成功后，扩展的图标将出现在浏览器工具栏上。

3. 应用案例和最佳实践

开发流程

遵循 Mozilla 开发者指南。
使用版本控制系统（如 Git）来管理代码。

调试技巧

使用 Firefox 的开发者工具进行调试。
利用 console.log 或其他调试工具输出日志。

用户交互

保持扩展界面简洁直观。
提供详细的用户帮助文档。

4. 典型生态项目

uBlock Origin：一款用于广告拦截和隐私保护的扩展。
Vue.js DevTools：用于调试 Vue.js 应用程序的扩展。
Tampermonkey：一个用户脚本管理器，允许用户自定义浏览器的功能。

登录后查看全文