Firefox 开发教程：从入门到精通
Firefox 不仅仅是一个浏览器，它更是一个强大的平台和工具集，它的开发生态系统非常活跃，为开发者提供了丰富的可能性。
（图片来源网络，侵删）
本教程将分为以下几个主要部分：
- 第一部分：Web 开发者
如何利用 Firefox 的开发者工具进行高效的网页开发。
- 第二部分：Firefox 扩展开发者
如何使用 Web 技术创建功能强大的浏览器扩展。
- 第三部分：Firefox 内部开发者
如何编译和调试 Firefox 源代码，为浏览器本身做贡献。
（图片来源网络，侵删） - 第四部分：学习资源与社区
第一部分：Web 开发者
作为 Web 开发者，Firefox 是你最重要的测试和调试平台之一，Firefox 提供了业界顶尖的开发者工具。
1 使用 Firefox 开发者工具
Firefox 内置了一套强大的开发者工具，可以通过按 F12 或 Ctrl+Shift+I (Windows/Linux) / Cmd+Opt+I (Mac) 打开，它包含以下几个面板：
- 元素面板: 检查和修改页面上的 HTML 和 CSS，你可以实时编辑样式、查看盒模型、计算值，并使用 Flexbox 和 Grid 布局调试工具。
- 控制台面板: 显示 JavaScript 错误、警告、日志信息 (
console.log)，它是调试 JS 代码和与页面交互的核心。 - 源代码面板: 查看、编辑和调试 JavaScript、HTML 和 CSS 文件，支持断点调试、单步执行、变量监视等功能。
- 网络面板: 监控和分析所有网络请求（XHR, Fetch, 图片, 脚本等），你可以查看请求头、响应体、加载时间、内容类型等，对性能优化至关重要。
- 性能面板: 使用
console.time和console.timeEnd或更高级的PerformanceAPI 来记录和分析代码的执行性能，找出瓶颈。 - 内存面板: 分析网页的内存使用情况，检测内存泄漏。
- 应用面板: 检查 Service Worker、Cache Storage、IndexedDB、Cookies 等存储机制。
学习资源:
2 关注 Firefox 的最新 Web 特性
Firefox 是 Web 标准的坚定支持者，很多新特性都在 Firefox 中率先得到实现。
（图片来源网络，侵删）
- 关注 Firefox 版本更新: 定期查看 Firefox 版本发布说明，了解新支持的 API、CSS 属性和开发者工具的改进。
- 实验性 Web 平台功能: Firefox 积极支持 实验性 Web 平台功能，你可以通过
about:config中的dom.enable_web_experiments标志来提前体验和测试。
第二部分：Firefox 扩展开发者
使用 Web 技术（HTML, CSS, JavaScript）来创建扩展，为 Firefox 添加新功能或修改其行为，这是最有趣且最具创造性的开发方向之一。
1 核心概念
一个现代的 WebExtension 主要由以下几个部分组成：
manifest.json: 扩展的“身份证”，定义了扩展的基本信息（名称、版本、描述）、权限、以及各种资源（如弹出窗口、后台脚本、内容脚本等）的路径。- 后台脚本: 在后台持续运行的脚本，不与特定页面关联，用于监听浏览器事件（如标签页更新、下载完成）、管理扩展状态等。
- 内容脚本: 注入到特定网页中运行的脚本，它可以读取和修改页面的 DOM，但不能直接访问网页的 JavaScript 变量（需要通过消息传递实现），常用于在页面上添加新功能、修改样式或抓取数据。
- 弹出窗口: 用户点击扩展工具栏图标时显示的界面，通常是一个小窗口。
- 选项页面: 用户可以在其中配置扩展设置。
- 权限: 扩展需要向用户申请才能访问某些敏感 API 或网站数据（如
tabs,storage,activeTab等）。
2 开发环境搭建
- 安装 Firefox: 确保你使用的是最新版的 Firefox。
- 安装 WebIDE (可选): Firefox 自带了一个名为 WebIDE 的工具，可以方便地打包、安装和调试扩展，但现在更推荐使用
web-ext。 - 安装
web-ext命令行工具:web-ext是官方推荐的现代化扩展开发工具，它简化了开发、打包和安装流程。# 安装 Node.js 和 npm (如果尚未安装) # 然后安装 web-ext npm install --global web-ext
3 开发你的第一个扩展：一个“Hello World”示例
-
创建项目目录:
mkdir my-first-extension cd my-first-extension
-
创建
manifest.json: 创建一个名为manifest.json的文件，内容如下：{ "manifest_version": 3, "name": "我的第一个扩展", "version": "1.0", "description": "一个简单的 Hello World 扩展", "icons": { "48": "icons/icon-48.png", "96": "icons/icon-96.png" }, "action": { "default_popup": "popup.html", "default_icon": { "16": "icons/icon-16.png", "48": "icons/icon-48.png" } }, "permissions": [ "activeTab" ] }manifest_version: 3是当前的标准版本。action定义了工具栏按钮的行为，这里我们让它打开一个弹出窗口。permissions: ["activeTab"]表示扩展需要访问当前活动标签页的权限，这是一个比较安全的权限。
-
创建资源文件:
- 创建一个
icons文件夹，并放入你喜欢的图标（16x16, 48x96 像素的 PNG 图片）。 - 创建
popup.html:<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <style> body { width: 200px; text-align: center; } button { padding: 5px 10px; } </style> </head> <body> <h3>Hello, Extension!</h3> <button id="change-color">改变页面背景色</button> <script src="popup.js"></script> </body> </html> - 创建
popup.js:document.getElementById('change-color').addEventListener('click', () => { // 向内容脚本发送消息 browser.tabs.query({active: true, currentWindow: true}, (tabs) => { browser.tabs.sendMessage(tabs[0].id, {action: "changeColor"}); }); });
- 创建一个
-
脚本: 创建一个
content.js文件，并将其注入到 manifest 中。 修改manifest.json，添加content_scripts字段：{ // ... 其他配置 ... "content_scripts": [ { "matches": ["<all_urls>"], "js": ["content.js"] } ] }创建
content.js:browser.runtime.onMessage.addListener((message, sender, sendResponse) => { if (message.action === "changeColor") { document.body.style.backgroundColor = "lightblue"; } }); -
使用
web-ext运行和调试: 在项目根目录下，打开终端运行：web-ext run
这会自动启动 Firefox 并加载你的扩展，点击工具栏上的图标，然后点击按钮，你就能看到页面背景色改变了！
4 学习资源
- 官方文档: WebExtensions API 和 WebExtensions 示例
- MDN 教程: 创建你的第一个扩展
- 官方仓库: firefox-browser-extensions (包含大量示例和最佳实践)
第三部分：Firefox 内部开发者
如果你想为 Firefox 本身做贡献，例如修复 Bug、优化性能或添加新功能，你需要编译 Firefox 源代码。
1 准备工作
-
硬件要求:
- CPU: 多核处理器（建议 4 核以上）。
- 内存: 至少 16GB RAM（推荐 32GB），因为编译非常消耗内存。
- 存储: 至少 50GB 的可用 SSD 空间。
- 操作系统: Linux (推荐), macOS, Windows (支持但较复杂)。
-
软件依赖:
- Linux (Ubuntu/Debian):
sudo apt-get update sudo apt-get install build-essential python3 python3-pip python3-setuptools python3-wheel mercurial rustc cargo ccache clang cmake ninja-build
- macOS: 使用 Homebrew 安装 Xcode Command Line Tools 和其他依赖。
- Windows: 安装 Visual Studio 2025 (使用“使用 C++ 的桌面开发”工作负载) 和 Git for Windows。
- Linux (Ubuntu/Debian):
2 编译步骤
-
获取源代码:
# 克隆仓库 hg clone https://hg.mozilla.org/mozilla-central/ cd mozilla-central # 获取所有依赖项（可能需要较长时间） python3 mach bootstrap
-
配置和编译:
# 创建配置文件（可以交互式选择） python3 mach configure # 开始编译（首次编译时间很长，后续会快很多） # -j 后面跟 CPU 核心数，可以加快编译速度 python3 mach build -j8
-
运行 Firefox: 编译成功后，你可以直接运行编译好的 Firefox：
./mach run
这会启动一个独立的、可调试的 Firefox 实例。
3 调试技巧
- 使用
mach命令:mach是 Firefox 的核心构建和自动化工具。mach help可以看到所有可用的命令。 - 调试 C++ 代码: 使用
gdb(Linux) 或 Visual Studio Debugger (Windows) 进行断点调试。 - 调试 JavaScript 代码: 在你编译的 Firefox 中使用开发者工具，就像普通浏览器一样。
- 日志输出: 编译和运行时，日志会输出到终端，对于 C++ 代码，可以使用
MOZ_LOG环境变量来打印特定模块的日志。
4 学习资源
- 官方贡献指南: Hacking - MDN
- Bugzilla: Firefox Bugzilla 是报告和追踪 Bug 的地方，你可以在这里找到“新手友好”的标签。
- 代码仓库: mozilla-central
第四部分：学习资源与社区
- MDN (Mozilla Developer Network): Web 开发和扩展开发的终极文档库。
- Firefox 开发者博客: Firefox Developer Blog 获取最新动态和深度技术文章。
- Mozilla Hacks: Mozilla Hacks 更多开发者相关的高级文章和教程。
- 社区论坛:
- Mozilla 开发者论坛: 提问和交流的好地方。
- [Matrix 频道**: 加入
#firefox或#webextensions等 Matrix 频道，与开发者实时交流。
- 贡献指南: 如何为 Firefox 做贡献
| 开发方向 | 核心技术 | 主要工具 | 适合人群 |
|---|---|---|---|
| Web 开发 | HTML, CSS, JavaScript | Firefox 开发者工具 | 所有 Web 开发者 |
| 扩展开发 | HTML, CSS, JavaScript, WebExtensions API | web-ext, manifest.json |
前端开发者，想定制浏览器的人 |
| 内部开发 | C++, Rust, JavaScript, Python | mach, hg, gdb, VS Code |
对浏览器底层感兴趣，想贡献代码的资深开发者 |
希望这份教程能帮助你开启 Firefox 开发的旅程！从你最感兴趣的部分开始，逐步深入，你会发现 Firefox 世界的无限可能。
