Chrome Extension/Javascript - 遍历 URL 数组并为每个获取 DOM

Question

我想知道是否有人可以帮助我？

我正在尝试编写一个 Google Chrome 扩展，它循环遍历 URL 的数组并为每个获取 DOM 并将其输出到某处（这里只是控制台）。理想情况下，我希望这一切都在后台完成，而不是必须更新活动选项卡......但不确定这是否可能 - 也许是另一个问题......

但现在，我的问题是它只会获取数组中最后一个 URL 的 DOM，而忽略它之前的所有内容。

这是我目前拥有的代码：

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

我尝试添加一个 setTimeout 来给每个页面加载时间，但这不起作用 - 而且没有说明每个页面需要多长时间才能完全加载。

我还尝试在选项卡更新时使用事件侦听器来检查页面是否已完全加载...但这只会完全停止整个工作。

任何帮助将不胜感激，因为我已经在这里工作了 3 天，并且即将失去所有希望。

Answer 1

使用 Promise 和 async/await 和 chrome.tabs.onUpdated 等待选项卡加载：

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

Chrome Extension/Javascript - 遍历 URL 数组并为每个获取 DOM

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

javascript

dom

google-chrome

google-chrome-extension