Chrome Extension/Javascript - Iterate through an array of URLs and Fetch DOM for each

问题

I was wondering if anyone might be able to help me out?

I am trying to write a Google Chrome Extension that loops through an array of URL's and grabs the DOM for each and outputs it somewhere (here just the console). Ideally I'd like this all to be done in the background rather than having to update the active tab... but not sure if this is possible - maybe for another question perhaps...

For now though, my problem is that it will only fetch the DOM of the last URL in the array and ignores all of those before it.

Here's the code I have at the moment:

var urls = ["http://url1", "http://url2", "http://url3"];
urls.forEach(function(e) {
    cycleUrls(e);
});

function cycleUrls(url) {
  chrome.tabs.update({
    url: url, 
    active: true
  }, () => { 
    
    // Get DOM of page
    chrome.tabs.executeScript({
      code: '(' + fetchTabDOM + ')();'
    }, (r) => {
      console.log(r[0]);
    });

  });
}

function fetchTabDOM() {
  return document.documentElement.innerHTML;
}

I have tried adding in a setTimeout to give each page time to load but this doesn't work - plus there's no telling how long each page will need to load completely.

I have also tried to use event listeners on tab update to check whether the page has completely loaded... but this just stops the whole thing working altogether.

Any help would be appreciated as I've been at this for 3 days now and about to lose all hope.

回答1:

Use Promise and async/await and chrome.tabs.onUpdated to wait for the tab to load:

(async () => {
  const fetchTabDOM = 'document.documentElement.innerHTML';
  const urls = ['http://url1', 'http://url2', 'http://url3'];
  const results = [];

  for (const url of urls) {
    await new Promise(resolve => {
      chrome.tabs.update({url, active: true}, tab => {
        chrome.tabs.onUpdated.addListener(function onUpdated(tabId, info) {
          if (tabId === tab.id && info.status === 'complete') {
            chrome.tabs.onUpdated.removeListener(onUpdated);
            chrome.tabs.executeScript({code: fetchTabDOM}, r => {
              results.push(r[0]);
              resolve();
            });
          }
        });
      });
    });
  }
  console.log(results);
})();

来源：https://stackoverflow.com/questions/65516552/chrome-extension-javascript-iterate-through-an-array-of-urls-and-fetch-dom-for