Firefox 扩展并非“每个标签页运行一份独立副本”，而是通过分层架构实现高效复用：背景脚本（background script）在浏览器启动或扩展启用时全局仅运行一次，长期驻留内存并管理状态；内容脚本（content script）则按需注入到匹配的网页中，每次加载新页面时单独执行，彼此隔离但可通过背景脚本协同通信。
firefox 扩展并非“每个标签页运行一份独立副本”，而是通过分层架构实现高效复用：背景脚本（background script）在浏览器启动或扩展启用时**全局仅运行一次**，长期驻留内存并管理状态；内容脚本（content script）则按需注入到匹配的网页中，每次加载新页面时单独执行，彼此隔离但可通过背景脚本协同通信。
Firefox WebExtensions 采用清晰的进程与作用域分离模型，理解其执行生命周期是开发跨标签页功能（如“从 A 页面采集数据，自动填充至 B 页面”）的前提。
✅ 核心执行模型：三类脚本各司其职
| 脚本类型 | 启动时机 | 运行范围 | 生命周期 | 典型用途 |
|---|---|---|---|---|
| Background 脚本 | 扩展安装/启用时启动，全程仅一次（除非手动重载或浏览器重启） | 全局（单例） | 持续驻留内存 | 状态管理、消息中转、定时任务、跨标签通信中枢 |
| Content 脚本 | 按 manifest.json 规则匹配页面后注入（可设 "run_at": "document_idle" 等） | 每个匹配的 tab 独立运行 | 页面卸载即销毁 | DOM 操作、数据提取、表单注入 |
| Popup / Options 脚本 | 用户点击弹窗或打开设置页时加载 | 单个 UI 实例 | UI 关闭即释放 | 用户交互、配置读写 |
? 关键事实：背景脚本是唯一能持久保存共享状态的组件。它不随标签页增减而重复创建，因此是实现“跨页数据桥接”的天然枢纽。
? 跨标签页通信实战：采集 → 存储 → 填充
假设需求：在电商商品页（Tab A）点击“复制价格”，在比价表单页（Tab B）自动粘贴该价格。
步骤 1：在 Tab A 的 content script 中提取并发送数据
// content-script-a.js（注入商品页）
document.getElementById("copy-price-btn").addEventListener("click", () => {
const price = document.querySelector(".price").textContent.trim();
// 发送消息至 background，附带 tab ID 便于溯源
chrome.runtime.sendMessage({
action: "savePrice",
price,
sourceTabId: window.chrome?.tabs?.id || -1 // 或使用 chrome.runtime.id 安全标识
});
});
步骤 2：Background 脚本统一存储与转发
// background.js（全局单例）
let sharedData = { lastPrice: null };
chrome.runtime.onMessage.addListener((request, sender, sendResponse) => {
if (request.action === "savePrice") {
sharedData.lastPrice = request.price;
console.log(`✅ 已缓存价格: ${sharedData.lastPrice}`);
// 主动通知所有监听中的 content script（如 Tab B）
chrome.tabs.query({ active: true, currentWindow: true }, tabs => {
tabs.forEach(tab => {
chrome.tabs.sendMessage(tab.id, {
action: "updatePriceField",
price: sharedData.lastPrice
}).catch(() => {}); // 忽略未监听的 tab
});
});
}
});
步骤 3：Tab B 的 content script 接收并填充
// content-script-b.js（注入表单页）
chrome.runtime.onMessage.addListener((message, sender, sendResponse) => {
if (message.action === "updatePriceField") {
const input = document.querySelector("#price-input");
if (input) {
input.value = message.price;
input.dispatchEvent(new Event('input', { bubbles: true })); // 触发 Vue/React 更新
console.log(`? 已自动填入价格: ${message.price}`);
}
}
});
⚠️ 注意事项与最佳实践
- 不要依赖全局变量跨 content script：每个 tab 的 content script 运行在独立沙箱，window.xxx 无法互通；
- 优先使用 chrome.storage.local 替代内存变量：若需持久化（如重启后仍有效），改用 chrome.storage.local.set/get；
- 注意权限声明：manifest.json 中需声明 "permissions": ["storage", "tabs"] 及对应 content_scripts.matches；
- 避免内存泄漏：Background 脚本长期运行，及时清理无用监听器（如 chrome.tabs.onUpdated.removeListener(handler)）；
- 安全边界：content script 无法直接访问页面 JS 变量（如 window.React），需通过 eval() 或 DOM injection 谨慎绕过（不推荐）。
✅ 总结：一次启动，多点协同
Firefox 扩展的本质是事件驱动的分布式系统：背景脚本作为“大脑”一次启动、永续在线；内容脚本作为“手脚”按需激活、专注当前页面。跨标签页协作不是靠“共享内存”，而是通过 chrome.runtime.sendMessage 构建可靠的消息总线——这既是设计约束，也是保障安全与稳定的关键架构选择。掌握这一范式，即可构建出如 Multi-Account Containers（容器隔离）、Tab Killer（标签管控）等复杂而健壮的浏览器增强功能。
