firefox 扩展并非“每打开一个标签页就运行一次”，而是按模块职责分层执行：背景脚本（background script）在扩展加载时启动并长期驻留，内容脚本（content script）则按需注入每个匹配页面——二者协同实现跨标签页数据共享与自动填充等高级功能。
firefox 扩展并非“每打开一个标签页就运行一次”，而是按模块职责分层执行：背景脚本（background script）在扩展加载时启动并长期驻留，内容脚本（content script）则按需注入每个匹配页面——二者协同实现跨标签页数据共享与自动填充等高级功能。
Firefox 扩展采用模块化运行模型，其生命周期与浏览器进程深度绑定，而非简单地“随标签页启停”。理解这一机制，是实现跨页面信息传递（如从 A 页面提取表单数据、自动填充至 B 页面）的前提。
一、三类核心脚本的运行时机与作用
| 脚本类型 | 启动时机 | 生命周期 | 典型用途 |
|---|---|---|---|
| Background 脚本 | 扩展安装/启用/浏览器启动时立即加载 | 持续运行，直至扩展禁用或浏览器关闭 | 管理全局状态、监听事件、中转消息、持久化存储 |
| Content 脚本 | 按 manifest.json 配置或后台动态注入，在匹配页面加载时执行 | 与对应 tab 寿命一致（页面刷新/跳转即重载） | 操作 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": ["<all_urls>"],
"background": {
"service_worker": "background.js"
},
"content_scripts": [{
"matches": ["<all_urls>"],
"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 === "saveFormData") {
sharedData[sender.tab.id] = request.data;
console.log("✅ Saved 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?.saveForm) {
chrome.runtime.sendMessage({
action: "saveFormData",
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 无法直接访问其他 tab 的 DOM，必须通过 chrome.runtime.sendMessage 经 background 中转，这是 WebExtensions API 的强制隔离设计；
- ? 存储选型：临时共享可用内存对象（如上例 sharedData），但需注意多进程下 background service worker 可能重启；生产环境务必用 chrome.storage.local 持久化；
- ⏱️ 性能考量：避免在 content script 中高频轮询或长时阻塞主线程；推荐事件驱动（如监听 submit、blur 或自定义按钮）；
- ? 权限最小化："<all_urls>" 权限风险高，应精确匹配目标域名（如 "https://example.com/*"）；
- ? 调试技巧：在 about:debugging#/runtime/this-firefox 中可分别查看 background service worker 控制台、各 tab 的 content script 控制台。
通过这种分层架构，Firefox 扩展既能保持轻量（content script 按需加载），又能实现复杂协作（background 作为可信枢纽）。无论是自动填充、跨页比价，还是多账户会话管理（如 Multi-Account Containers 的底层原理），其根基都在于对脚本生命周期与通信范式的精准掌控。
