Реагируйте на расширение Chrome и обещания

Question

Я пишу расширение для Chrome в ReactJS.

Я перебираю массив URL-адресов и пытаюсь получить HTML-содержимое этих страниц.

this.state.advertData.map(function(e, i) {

    common.updateTabUrl(e.url).then((tab) => {

        common.requestHTML(tab).then((response) => {

            console.log(response.content);

        })

    });

})

common.js:

let requestHTML = function(tab) {

    return new Promise(function(resolve, reject) {

        chrome.tabs.query({active: true, currentWindow: true}, function(tabs) {
            chrome.tabs.sendMessage(tab.id, {'req': 'source-code'}, function (response) {

                resolve(response)

            })
        })

    })

}

let updateTabUrl = function(url) {

    return new Promise(function(resolve, reject) {

        let update = chrome.tabs.update({
            url: url
        }, function(tab) {
            chrome.tabs.onUpdated.addListener(function listener (tabId, info) {
                if (info.status === 'complete' && tabId === tab.id) {
                    chrome.tabs.onUpdated.removeListener(listener);
                    resolve(tab);
                }
            });


        })

    })
}

content_script.js

chrome.runtime.onMessage.addListener(function (request, sender, sendResponse) {
    let response = '';
    if (request.req === 'source-code') {
        response = document.documentElement.innerHTML;
    }
    sendResponse({content: response});
});

Моя проблема в том, что response.content всегда кажется одинаковым.Что еще более важно, на вкладке, которая обновляется, отображается только последний URL в моем массиве.Я думаю, что это проблема с тем, как я обращаюсь с Обещаниями.

Любая помощь приветствуется.

Answer 1

Проблема с вашим кодом в том, что он не ждет загрузки предыдущего URL-адреса, прежде чем перейти к следующему, поэтому на вкладке фактически загружается только последний.

Я предлагаю использовать 1) Mozilla WebExtension polyfill , 2) синтаксис await / async, 3) executeScript , который автоматически запускается, когда вкладка завершается по умолчанию 4) строка литерального кода в executeScript, поэтому вам не нужнони в отдельный файл, ни в объявление скрипта содержимого в manifest.json.

async function getUrlSourceForArray({urls, tabId = null}) {
  const results = [];
  for (const url of urls) {
    await browser.tabs.update(tabId, {url});
    const [html] = await browser.tabs.executeScript(tabId, {
      code: 'document.documentElement.innerHTML',
    });
    results.push(html);
  }
  return results;
}

Вызов функции async:

const allHtmls = await getUrlSourceForArray({
  urls: this.state.advertData.map(d => d.url),
  tabId: null, // active tab
});

PS Вы также можете открыть все URL-адреса водин раз в новом окне в фоновом режиме, если предположить, что не будет больше, чем, скажем, 10 URL, иначе вы рискуете исчерпать ОЗУ пользователя.