Firefox 扩展开发最佳实践指南

2025-05-09 11:29:03作者：滕妙奇

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>