Как l oop a javascript страница, которая обрабатывает запросы?

Question

Я пытаюсь l oop эту страницу для моего chrome расширения, используя javascript. Он должен продолжать работать до тех пор, пока не получит ответ от "chrome .tabs.sendMessage", чтобы остановить работу. Функция ответа из "chrome .tabs.sendMessage" отправляет правильный логический тип, но остальная часть кода ниже не работает. Когда я запускаю этот код, сначала печатается console.log (cont), но сначала должен запускаться console.log (response [0]). Я думаю, что это проблема с асинхронным c программированием, но я новичок в 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);

Эта страница всплывающая. js Кстати, это сценарий всплывающего окна. html, что показывает расширение chrome, когда вы нажимаете значок.

Answer 1

Каждый сценарий JavaScript является однопоточным, поэтому синхронная while l oop будет работать вечно в одной задаче l oop, что означает ни один из асинхронных обратных вызовов query (), executeScript () и sendMessage () будет работать всегда, и ваше расширение будет бесконечно потреблять 100% ресурсов ЦП.

Решение состоит в том, чтобы сделать l oop асинхронным и позволить 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 для получения дополнительной информации. если нужно.