Chrome 扩展：从给定的 url 获取网页的文本答案

【问题标题】：Chrome extension: Get the text of a web page from given urlChrome 扩展：从给定的 url 获取网页的文本
【发布时间】：2020-03-21 20:57:55
【问题描述】：

首先，我完全是新手制作 chrome 扩展，然后在 chrome 扩展的一部分中，我会收到不同的 url，我想存储网页的文本以供以后处理，从而产生一个布尔变量数组, 每个都与给定的 url 关联。从示意图上看，它是这样的：

var result;
function process(text){
  if something -> result.push(true);
  if not -> result.push(false);
}
function main(){
  for (i...){
    url = given[i];
    text = getHTMLText(url);
    process(text);
  }
  final();//when the loop finish activate another function that use the global variable: result
}

我的 main 函数有问题，首先我尝试了同步 XMLHttpRequest，虽然它的工作速度很慢，而且 chrome 总是给出同步 XMLHttpRequest 已弃用的警告。

    for (var i = 0; i < urls.length; i++){
        url = urls[i];

        var req = new XMLHttpRequest();
        req.open('GET', url, false); 
        req.send(null);
        if (req.status == 200) detecting(req.responseText);
    };

我发现的其他解决方案是使用 fetch(url)，但我发现我不完全理解的代码。虽然返回的文本可以正常工作，但是 proccess 函数在每次页面更新时给出不同的结果。

    for (var i = 0; i < urls.length; i++){
        url = urls[i];
        fetch(url).then(function(response) { 
            response.text().then(function(text) {
            detecting(text);
            });
        });
    };

其他问题，但这是因为我对 fetch() 知之甚少，我无法将 text 存储在 fetch() 之外，每次我执行 console.log 时都会给出 undefined，这个对我来说，文本的处理非常复杂。

我已经看到也许可以通过chrome的扩展API来完成，但我不知道该怎么做。

【问题讨论】：

标签： javascript google-chrome-extension

【解决方案1】：

main 伪代码中显示的算法可以通过使用 async/await 和 Promise.all 轻松实现，无需 for 循环：

(async () => {
  const results = await Promise.all(urls.map(processUrl));
  console.log(results);
  // further processing must be also inside this IIFE
})();

async function processUrl(url) {
  try {
    const text = await (await fetch(url)).text();
    return {url, text, status: detecting(text)};
  } catch (error) {
    return {url, error};
  }
}

【讨论】：