Chrome 扩展程序：从给定的 url 获取网页的文本

Question

First, I'm completly newbie making chrome extension, then in a part of the chrome extension I will receive differents urls and I want to store the text of the web page to process it later, resulting in an array of boolean variables, each associated with the given url. Schematically it would be something like this:

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
}

I have problems with main function, first I have tried with synchronous XMLHttpRequest, although it works it's very slow and chrome always give the warning that synchronous XMLHttpRequest is deprecated.

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

Other solution that I find was use fetch(url), but the code that I find I don't fully understand. Although the returned text works correctly but then the proccess function give different results on each page update.

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

Other problem, but this is because of the little knowledge I have of fetch(), was that I can't store the text out of the fetch(), every time I do console.log give undefined, this greatly complicates the processing of the text for me.

I have seen that maybe it can be done through extension APIs of chrome but I can't see how to do it.

Answer 1

The algorithm shown in your main pseudocode can be implemented easily by using async/await and Promise.all, without a for loop:

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