Firefox扩展运行机制及跨标签页信息自动填充实现咨询

一、Firefox扩展的运行机制 #

Firefox扩展的不同组件运行逻辑存在差异，核心分为以下几类：

• 后台脚本（Background Script）：Firefox启动（或扩展首次启用）时加载，会持续运行在浏览器后台，仅在浏览器资源不足时可能被主动回收。所有标签页共享同一个后台脚本实例，是扩展的核心逻辑中枢。
• 内容脚本（Content Script）：会注入到匹配规则的标签页中，每个标签页独立运行一个实例，与其他标签页的内容脚本完全隔离，无法直接访问后台脚本变量，只能通过消息传递完成通信。
• 弹出页（Popup）：仅在点击扩展图标时加载，关闭后立即销毁，每次打开都是全新实例。
• 选项页（Options Page）：打开时加载，关闭后销毁，独立于其他组件运行。

二、跨标签页保存信息并自动填充的实现方法 #

核心是利用Firefox扩展的存储API实现全局数据共享，配合内容脚本与消息传递完成数据的保存与填充：

1. 保存信息到全局存储 #

在需要收集数据的标签页中，通过内容脚本监听用户操作（如表单提交、按钮点击），将数据存入browser.storage.local（若需同步到用户账号，可使用browser.storage.sync）：

// 内容脚本：监听表单提交并保存数据
document.querySelector('#save-form').addEventListener('submit', (e) => {
  e.preventDefault();
  const userData = {
    username: document.querySelector('#username').value,
    email: document.querySelector('#email').value
  };
  // 存入本地存储
  browser.storage.local.set({ savedUserData: userData });
});

2. 在目标标签页自动填充数据 #

有两种常见触发填充的方式：

方式一：页面加载时自动读取填充

在目标标签页的内容脚本中，监听页面加载完成事件，从存储读取数据并填充到对应字段：

// 内容脚本：页面加载完成后自动填充
window.addEventListener('load', async () => {
  const result = await browser.storage.local.get('savedUserData');
  if (result.savedUserData) {
    document.querySelector('#target-username').value = result.savedUserData.username;
    document.querySelector('#target-email').value = result.savedUserData.email;
  }
});

方式二：监听存储变化实时同步

若需要数据更新时立刻在目标标签页同步，可在内容脚本中监听存储变化事件：

// 内容脚本：监听存储数据变化并实时填充
browser.storage.onChanged.addListener((changes, areaName) => {
  if (areaName === 'local' && changes.savedUserData) {
    const newData = changes.savedUserData.newValue;
    document.querySelector('#target-username').value = newData.username;
    document.querySelector('#target-email').value = newData.email;
  }
});

3. 权限配置 #

需在manifest.json中声明必要权限与内容脚本匹配规则：

{
  "manifest_version": 3,
  "name": "数据同步填充工具",
  "version": "1.0",
  "permissions": ["storage"],
  "content_scripts": [
    {
      "matches": ["https://example.com/save-page/*"], // 数据收集页面
      "js": ["save-content.js"]
    },
    {
      "matches": ["https://example.com/fill-page/*"], // 数据填充页面
      "js": ["fill-content.js"]
    }
  ]
}

内容的提问来源于stack exchange，提问作者Nate-ar