javascript - Chrome 扩展程序 : Get the text of a web page from given url

Question

首先，我完全是制作 chrome 扩展的新手，然后在 chrome 扩展的一部分中，我将收到不同的网址，并且我想存储网页的文本以供稍后处理，从而产生一系列 bool 变量，每个都与给定的 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)，但我发现我不完全理解代码。虽然返回的文本工作正常，但处理函数在每个页面更新时给出不同的结果。

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

其他问题，但这是因为我对 fetch() 知之甚少，每次我执行 console.log 操作时，我都无法将 text 存储在 fetch() 之外。日志给出未定义，这使我的文本处理变得非常复杂。

我看到也许可以通过 chrome 的扩展 API 来完成，但我不知道如何做到。

Answer 1

使用 async/await 和 Promise.all 可以轻松实现 main 伪代码中显示的算法，无需使用 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};
  }
}