CHROME-EXTENSIONS：我怎样才能 运行 一个函数同时用于不同的选项卡？

Question

我正在开发一个创建 google chrome 扩展的项目。我有一个功能。我希望如果新选项卡是 onUpdated 或 onActivated 此功能有效。另外，我希望它同时适用于每个选项卡。我怎样才能做到这一点？这是我的代码：

chrome.tabs.onActivated.addListener((activeInfo) => {
  chrome.tabs.query({ active: true }, (tabs) => {
    Process()
  })
})

chrome.tabs.onUpdated.addListener((tabId, changeInfo, tab) => {
  chrome.tabs.query({ currentWindow: true }, (tabs) => {
    Process()
  })
})

Answer 1

此示例将展示如何对选项卡事件 onActivated 和 onActivated 应用相同的功能，以及如何将功能应用于这些事件的所有选项卡。您将希望在后台服务工作者中执行此操作。

创建指定服务工作者的扩展清单：

{
  "name": "Example",
  "version": "1.0",
  "manifest_version": 3,
  "background": {
    "service_worker": "background.js"
  }
}

接下来，在 background.js 脚本（服务工作者）中，您需要处理这些事件。最基本的实现可能如下所示，每次激活或更新任何选项卡时，都会在每个选项卡上调用 Process 函数：

function Process(tab) {
    // now do something with each tab
    console.log(`Process tab id ${tab.id}`);
}

function ProcessAllTabs() {
    // do not specify query options to get 
    // all tabs in all windows for current user
    chrome.tabs.query({},
        (tabs) => tabs.map(Process));
}

// register the event listeners
chrome.tabs.onActivated.addListener(ProcessAllTabs);
chrome.tabs.onUpdated.addListener(ProcessAllTabs);

如果调试此行为，您会注意到选项卡更新将调用事件处理程序两次，因为选项卡经历不同的更新状态。您可能想要更具体一些，也许只在 选项卡更新完成后才调用 Process ，或者了解有关哪个事件导致调用 Process 的更多信息。在那种情况下，更详细的实现可能如下所示：

// name the events
const EventsEnum = {UPDATE: 'update', ACTIVATE: 'activate'};

function Process(tab, eventName) {
    // now do something with each tab:
    console.log(`Process tab id ${tab.id} on ${eventName}`);
}

function ProcessAllTabs(eventName) {
    // do not specify query options to get
    // all tabs in all windows for current user
    chrome.tabs.query({},
        // pass more arguments to Process function
        (tabs) => tabs.map(tab => Process(tab, eventName)));
}

// register the event listeners
chrome.tabs.onActivated.addListener(
    // include event name
    () => ProcessAllTabs(EventsEnum.ACTIVATE));

chrome.tabs.onUpdated.addListener((tab, changeInfo) => {
    // require that tab update is complete before proceeding
    if (changeInfo.status === "complete") {
        ProcessAllTabs(EventsEnum.UPDATE)
    }
});