Firefox 扩展开发最佳实践指南

2025-05-09 22:48:43作者：滕妙奇

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：一个用户脚本管理器，允许用户自定义浏览器的功能。

登录后查看全文

热门内容推荐

最新内容推荐

项目优选

收起

ohos_react_native

React Native鸿蒙化仓库

🎉 (RuoYi)官方仓库基于SpringBoot，Spring Security，JWT，Vue3 & Vite、Element Plus 的前后端分离权限管理系统

openGauss-server

openGauss kernel ~ openGauss is an open source relational database management system

旨在打造算法先进、性能卓越、高效敏捷、安全可靠的密码套件，通过轻量级、可剪裁的软件技术架构满足各行业不同场景的多样化要求，让密码技术应用更简单，同时探索后量子等先进算法创新实践，构建密码前沿技术底座！

HarmonyOS-Examples

本仓将收集和展示仓颉鸿蒙应用示例代码，欢迎大家投稿，在仓颉鸿蒙社区展现你的妙趣设计！

CangjieCommunity

为仓颉编程语言开发者打造活跃、开放、高质量的社区环境

ShopXO开源商城

🔥🔥🔥ShopXO企业级免费开源商城系统，可视化DIY拖拽装修、包含PC、H5、多端小程序(微信+支付宝+百度+头条&抖音+QQ+快手)、APP、多仓库、多商户、多门店、IM客服、进销存，遵循MIT开源协议发布、基于ThinkPHP8框架研发

一款跨平台的 Markdown AI 笔记软件，致力于使用 AI 建立记录和写作的桥梁。

🍒 Cherry Studio 是一款支持多个 LLM 提供商的桌面客户端

基于可以运行在OpenHarmony的git，提供git客户端操作能力