Firefox扩展执行机制：运行时机与跨标签页通信

很多人误以为 Firefox 扩展会在每个新标签页打开时运行一次，实际情况并非如此。扩展采用模块化分层架构：背景脚本在扩展启动时就常驻后台，内容脚本则按需注入到匹配的页面。两者协同工作，才能实现跨标签页的数据共享和自动填充等高级功能。

Firefox 扩展并非表面看起来那么简单——它采用模块化运行模型，生命周期与浏览器进程深度绑定，而不是简单地随标签页的打开与关闭而启停。理解这一机制，是实现跨页面信息传递（例如从 A 页面提取表单数据，自动填充到 B 页面）的前提。

一、三类核心脚本的运行时机与作用

脚本类型	启动时机	生命周期	典型用途
Background 脚本	扩展安装/启用/浏览器启动时立即加载	持续运行，直到扩展禁用或浏览器关闭	管理全局状态、监听事件、中转消息、持久化存储
Content 脚本	按 manifest.json 配置或后台动态注入，在匹配页面加载时执行	与对应标签页寿命一致（页面刷新/跳转即重载）	操作 DOM、读取页面数据、注入 UI 元素
Popup / Options 脚本	用户点击图标或打开设置页时加载	页面关闭即卸载	提供用户交互界面

关键结论：Background 脚本是跨标签页通信的“中枢”——它始终在线，可以安全地保存数据、协调多个 content script 的请求。

二、实现“从一页取数，填到另一页”的完整流程

下面以一个典型场景（表单字段同步）为例，展示工程化实现的具体代码组织方式。

1. 在 manifest.json 中声明权限与脚本

{
  "manifest_version": 3,
  "name": "Cross-Tab Autofill",
  "version": "1.0",
  "permissions": ["storage", "tabs"],
  "host_permissions": [""],
  "background": {
    "service_worker": "background.js"
  },
  "content_scripts": [{
    "matches": [""],
    "js": ["content.js"],
    "run_at": "document_idle"
  }]
}

2. Background 脚本：持久化存储 + 消息路由

// background.js
let sharedData = {}; // 或使用 chrome.storage.local 更可靠

chrome.runtime.onMessage.addListener((request, sender, sendResponse) => {
  if (request.action === "sa veFormData") {
    sharedData[sender.tab.id] = request.data;
    console.log(" Sa ved form data from tab:", sender.tab.id);
    sendResponse({ success: true });
  } else if (request.action === "getFormData") {
    // 返回所有已存数据（或按条件过滤）
    sendResponse({ data: sharedData });
  }
});

3. Content 脚本：页面侧数据采集与应用

// content.js

// 从当前页面提取表单字段（示例）
function extractForm() {
  const inputs = document.querySelectorAll('input[type="text"], input[type="email"], textarea');
  const data = {};
  inputs.forEach(el => {
    if (el.name && el.value.trim()) {
      data[el.name] = el.value;
    }
  });
  return data;
}

// 监听用户操作（如点击"保存到填充库"按钮）
document.addEventListener('click', e => {
  if (e.target?.dataset?.sa veForm) {
    chrome.runtime.sendMessage({
      action: "sa veFormData",
      data: extractForm()
    });
  }
});

// 自动填充：当检测到目标表单时触发
function autoFillTarget() {
  chrome.runtime.sendMessage({ action: "getFormData" }, (response) => {
    if (response?.data) {
      Object.entries(response.data).forEach(([tabId, formData]) => {
        Object.entries(formData).forEach(([name, value]) => {
          const field = document.querySelector(`[name="${name}"]`);
          if (field && !field.value) field.value = value;
        });
      });
    }
  });
}

// 可结合 MutationObserver 监听表单动态加载
if (document.querySelector('form')) autoFillTarget();

三、关键注意事项与最佳实践

• 安全边界：Content script 不能直接访问其他标签页的 DOM，必须通过 chrome.runtime.sendMessage 经 background 中转——这是 WebExtensions API 的强制隔离设计，请勿尝试绕过。
• 存储选型：临时共享可使用内存对象（如上例 sharedData），但需注意多进程环境下 background service worker 可能重启。生产环境务必使用 chrome.storage.local 进行持久化，避免数据丢失。
• 性能考量：在 content script 中应避免高频轮询或长时间阻塞主线程。推荐采用事件驱动方式，如监听 submit、blur 或自定义按钮点击。
• 权限最小化："" 权限风险较高，强烈建议精确匹配目标域名，例如 "https://example.com/*"。
• 调试技巧：在 Firefox 地址栏输入 about:debugging#/runtime/this-firefox，可分别查看 background service worker 的控制台以及各个标签页的 content script 控制台，便于排查问题。

借助这种分层架构，Firefox 扩展既能保持轻量（content script 按需加载），又能实现复杂协作（background 作为可信枢纽）。无论是自动填充、跨页比价，还是多账户会话管理（如 Multi-Account Containers 的底层原理），其根基都在于对脚本生命周期与通信范式的精准掌控。理解这些机制，离写出稳定可靠的扩展就不远了。