javascript - 打开多个选项卡并编写脚本时，如何使 chrome.tabs.executeScript 在相应选项卡中运行代码？

Question

我的扩展程序的内容脚本扫描某些页面以查找 vendor 代码，并将它们与 chrome.runtime.sendMessage 一起发送到我的后台脚本，该脚本创建新选项卡并在每个选项卡上执行一些代码。但我遇到了所有代码仅在最后一个选项卡上运行的问题。

我尝试将其放入某个异步/等待函数中，但没有成功。

chrome.runtime.onMessage.addListener(
  function (request, sender, sendResponse) {
      if (request.message === "open_new_tab") {
          for (let vCode of request.vCodes){
              chrome.tabs.create({url: "https://example.com/" + vCode}, function(){
              chrome.tabs.executeScript({code: "console.log(" + vCode + ")", runAt: 'document_end'});
          }); 
      }
  }
});

Answer 1

您没有指定选项卡 ID，因此executeScript 使用事件选项卡。由于 API 是异步的，因此当事件选项卡不是您过去创建的选项卡时，您的执行脚本将在未来某个未指定的时间运行。

只需重复使用提供给 chrome.tabs.create 的选项卡 ID的回调:

chrome.runtime.onMessage.addListener(
  (request, sender, sendResponse) => {
    if (request.message === 'open_new_tab') {
      for (let vCode of request.vCodes) {
        chrome.tabs.create({url: 'https://example.com/' + vCode}, tab => {
          chrome.tabs.executeScript(tab.id, {code: `console.log(${vCode})`});
        });
      }
    }
  });

如果您只想打开一个选项卡并重复使用它来按顺序加载站点，我建议使用 Mozilla's WebExtension polyfill和异步/等待:

browser.runtime.onMessage.addListener(
  async (request, sender) => {
    if (request.message === 'open_new_tab') {
      let tab;
      for (const vCode of request.vCodes) {
        const url = 'https://example.com/' + vCode;
        tab = tab ?
          await browser.tabs.update(tab.id, {url}) :
          await browser.tabs.create({url});
        await browser.tabs.executeScript(tab.id, {code: `console.log(${vCode})`});
      }
    }
  });