如何让Firefox扩展在页面加载时触发？求browser.tabs.onUpdated用法示例

前置配置（manifest.json） #

首先需要在扩展的manifest文件中声明必要权限，才可以正常调用tabs相关API：

• Manifest V3 配置示例：

{
  "manifest_version": 3,
  "name": "页面加载监听示例",
  "version": "1.0",
  "background": {
    "scripts": ["background.js"]
  },
  "permissions": ["tabs"],
  "host_permissions": ["<all_urls>"]
}

• Manifest V2 配置示例：

{
  "manifest_version": 2,
  "name": "页面加载监听示例",
  "version": "1.0",
  "background": {
    "scripts": ["background.js"]
  },
  "permissions": ["tabs", "<all_urls>"]
}

注意：如果只需要监听特定站点的页面加载，把<all_urls>替换成对应站点的匹配规则即可，比如"https://*.example.com/*"

核心监听代码（background.js） #

基础用法（监听所有标签页状态变化） #

// 页面加载完成时触发的处理函数
function handleTabUpdated(tabId, changeInfo, tab) {
  // changeInfo.status为complete时代表页面加载完成
  if (changeInfo.status === 'complete' && tab.url) {
    // 此处写入你的业务逻辑，示例为打印加载完成的页面地址
    console.log(`页面加载完成：${tab.url}`);
    // 可选：给当前标签页的content script发送加载完成通知
    browser.tabs.sendMessage(tabId, {
      action: 'pageLoaded',
      url: tab.url
    }).catch(err => console.log('消息发送失败，可能页面未注入content script：', err));
  }
}

// 注册监听事件
browser.tabs.onUpdated.addListener(handleTabUpdated);

带过滤参数的优化用法 #

extraParameters参数可以提前过滤监听事件，减少不必要的函数触发，提升扩展运行性能：

// 配置过滤规则：只监听页面状态变化、且url匹配https规则的事件
const filter = {
  properties: ["status"],
  urls: ["https://*/*"]
}

browser.tabs.onUpdated.addListener(handleTabUpdated, filter);

跨浏览器兼容写法 #

如果需要一套代码同时兼容Chrome和Firefox，可以使用以下兼容逻辑：

// 统一API前缀
const browserAPI = typeof browser !== 'undefined' ? browser : chrome;

// 注册监听，两种浏览器均适配callback写法
browserAPI.tabs.onUpdated.addListener((tabId, changeInfo, tab) => {
  if (changeInfo.status === 'complete' && tab.url) {
    // 通用业务逻辑
    console.log(`页面加载完成：${tab.url}`);
  }
});

补充：你之前的Chrome版本代码无法在Firefox运行，大概率是因为没有在manifest中声明对应的host权限，Firefox对权限的校验比Chrome更严格，没有对应host权限时tabs API无法获取到页面url等信息，也不会触发对应监听。

内容的提问来源于stack exchange，提问作者IaNtErIf