При открытии и создании сценариев для нескольких вкладок, как заставить chrome.tabs.executeScript запускать код на соответствующей вкладке?

Question

Сценарий содержимого моего расширения сканирует некоторые страницы на наличие кодов поставщиков и отправляет их с помощью chrome.runtime.sendMessage в мой фоновый скрипт, который создает новые вкладки и выполняет код для каждой из них.Но я столкнулся с проблемой, что весь код запускается только на последней вкладке.

Я пытался поместить его в некоторую функцию async / await, и она не сработала.

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

Вы не указали идентификатор вкладки, поэтому executeScript использует активную вкладку.Поскольку API является асинхронным, ваш executeScript выполняется в неустановленное время в будущем, когда активная вкладка не является вкладкой, созданной вами в прошлом.

Просто повторно используйте идентификатор вкладки, предоставленный для chrome.Обратный вызов tabs.create :

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})`});
        });
      }
    }
  });

Если вы хотите открыть только одну вкладку и повторно использовать ее для последовательной загрузки сайтов, я предлагаю использовать Polyfill WebExtension Mozilla и асинхронный/ жду:

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})`});
      }
    }
  });