CHROME-EXTENSIONS：如何同时为不同标签页运行指定函数？

1. 先配置manifest.json权限 #

你需要先在扩展清单中声明所需权限，才能向所有标签页注入脚本执行逻辑：

{
  "manifest_version": 3,
  "name": "你的扩展名称",
  "version": "1.0",
  "background": {
    "service_worker": "background.js"
  },
  "permissions": ["tabs", "scripting"],
  "host_permissions": ["<all_urls>"]
}

如果只需要对特定网站的标签页生效，把<all_urls>替换成对应网站域名即可。

2. 修正后台事件监听逻辑 #

你原有代码的问题是：仅在后台服务 worker 上下文调用了Process()，并不会把函数下发到各个标签页的执行环境中运行，同时标签查询条件限制了仅查询当前窗口/激活标签，达不到全标签页执行的要求。
修正后的代码（写在background.js里）：

// 先定义你的Process逻辑，注意如果需要操作页面DOM，逻辑要写在注入的函数里
const Process = () => {
  // 这里写你要执行的函数逻辑
  console.log('Process executed in tab', window.location.href)
}

// 标签激活事件监听
chrome.tabs.onActivated.addListener(async () => {
  // 查询所有打开的标签页
  const allTabs = await chrome.tabs.query({})
  // 遍历所有标签页注入执行Process
  await Promise.all(allTabs.map(tab => {
    if (tab.id) { // 过滤掉无id的特殊标签页（如chrome://内置页面）
      return chrome.scripting.executeScript({
        target: { tabId: tab.id },
        func: Process // 把要执行的函数传入
      })
    }
  }))
})

// 标签更新事件监听
chrome.tabs.onUpdated.addListener(async (tabId, changeInfo) => {
  // 仅在标签加载完成后触发，避免重复执行（可根据需求调整判断条件）
  if (changeInfo.status !== 'complete') return
  const allTabs = await chrome.tabs.query({})
  await Promise.all(allTabs.map(tab => {
    if (tab.id) {
      return chrome.scripting.executeScript({
        target: { tabId: tab.id },
        func: Process
      })
    }
  }))
})

额外注意事项 #

• 如果你的Process函数需要在不同标签页之间同步共享数据，可以用chrome.storage.local存储全局状态，所有标签页都可以读写该存储实现数据同步
• 如果要禁止对Chrome内置页面（如chrome://extensions）执行注入，加个url判断过滤即可
• Manifest V2的扩展可以用chrome.tabs.executeScript替代上述chrome.scripting.executeScriptAPI

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