如何循环处理请求的javascript页面？

我正在尝试使用javascript为我的chrome扩展循环此页面。它所做的是，它应该一直运行，直到收到“chrome.tabs.sendMessage”的响应停止运行。“chrome.tabs.sendMessage”中的响应函数发送正确的布尔值，但下面的其余代码不起作用。当我运行此代码时，console.log（cont）首先打印，但console.log（响应[0]）应该首先运行。我认为这是异步编程的一个问题，但我对javascript和这种编程是新手，所以我不确定如何解决它。任何建议或帮助都将不胜感激，谢谢

var temp = false;

function injectTheScript() {
    var name = document.getElementById('name').value;

     chrome.tabs.query({active: true, currentWindow: true}, function(tabs) {
         chrome.tabs.executeScript(tabs[0].id, {file: "utilities.js"}, function(){
             chrome.tabs.sendMessage(tabs[0].id, name, function(response){
                temp = response[0];
                console.log(response[0]);
            });
        });
    });
    return temp;
}

function nextName() {
    var cont = true;
    while(cont){
        cont = injectTheScript();
        console.log(cont); //this gets printed first but should be printed second
    }
}

document.getElementById('start').addEventListener('click', nextName);

---

这个页面是popup.js顺便说一句，它是popup.html背后的脚本，当你点击图标时chrome扩展会显示出来。

每个JavaScript脚本的上下文都是单线程的，所以你的同步

while

循环将在一个事件循环任务中永远运行，这意味着没有对query（），executeScript（）的异步回调，sendMessage（）将永远运行，您的扩展将无休止地消耗100%的CPU

解决方案是使循环异步，并让injectTheScript通过

Promise

返回内容脚本的响应值：

function injectTheScript() {
  return new Promise(resolve => { 
    const name = document.getElementById('name').value;
    chrome.tabs.query({active: true, currentWindow: true}, ([tab]) => {
      chrome.tabs.executeScript(tab.id, {file: 'utilities.js'}, () => {
        chrome.tabs.sendMessage(tab.id, name, resolve);
      });
    });
  });
}

async function nextName() {
  while (await injectTheScript()) {
    console.log('yay');
  }
}

上述代码要求内容脚本中的onMessage侦听器通过sendResponse返回布尔值：

chrome.runtime.onMessage.addListener((message, sender, sendResponse) => {
  // do something
  // ..............
  sendResponse(true); // or false
});

如果需要更多信息，请参阅

Promise

和异步JavaScript教程