Chrome扩展程序/Javascript-遍历URL数组并为每个URL提取DOM [英] 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?

我正在尝试编写一个Google Chrome扩展程序，该程序循环浏览URL数组，并获取每个URL的DOM并将其输出到某个地方(这里只是控制台).理想情况下，我希望所有这些操作都在后台完成，而不是必须更新活动标签...但不确定是否可行-也许是另一个问题...

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...

尽管如此，我的问题是，它只会获取数组中最后一个URL的DOM，而忽略它之前的所有URL.

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.

这是我目前的代码:

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来给每个页面加载时间，但这是行不通的-而且也无法告知每个页面需要完全加载多长时间.

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.

任何帮助都将不胜感激，因为我已经呆了3天了，将失去所有希望.

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

推荐答案

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

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

这篇关于Chrome扩展程序/Javascript-遍历URL数组并为每个URL提取DOM的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！