javascript - Waiting for the contentscript to finish before looping next item in background script in chrome extension

Question

I'm trying to make a Chrome extension, but got a bit of a headache due to the whole asynchronous programming and communicating.

Essentially what I'm trying to do is the following:

1. Loop over an array in the background script
2. Send a message to the content script that it has to execute a function. Tell the background script when it's done with the result data.
3. Now the background script should be waiting for the result to be received before going to the next item in the array.
4. When it has received the data, it should move on to the next item in the array

This is the backgroundscript part which sends messages to the contentscript with single search queries.

async function searchGoogle(url) {
  let terms = ["food", "nature", "computers", "trees", "clothing"];
  console.log(terms);

  chrome.tabs.query({ active: true, currentWindow: true }, async function (tabs) {

    terms.forEach(function (term) {
      console.log("Sending term..");
      chrome.tabs.sendMessage(tabs[0].id, { msg: "SEARCH_SINGLE_TERM", term: term }, function (response) {
        setTimeout(() => {
          console.log(response);
        }, 5000);

        console.log(response);
      });
    });
  });
}

This is the contentscript which listens for the background queries one by one, and then searches it.

$(document).ready(function () {
  chrome.runtime.onMessage.addListener(function (message, sender, sendResponse) {
    switch (message.msg) {
      case "SEARCH_SINGLE_TERM":
        firstUrl = searchSingleTerm(message.term);
        return new Promise(function (resolve) {
          console.log("starting wait");
          setTimeout(resolve, 5000);
        }).then(() => {
          console.log("done waiting");
          sendResponse(firstUrl)
        });
    }
    return true; // for sendResponse so it doesn't close the listener
  });
});


function searchSingleTerm(term) {
  document.querySelector('.gLFyf.gsfi').value = term

  console.log("-- Executing click search button--");
  document.querySelector('.Tg7LZd').click();

  let firstUrl = document.querySelector('.yuRUbf a').href

  return firstUrl
}

Right now it still executes everything at the same time (it sends 5 messages to content script which all run at the same time instead of serially). How can I convert it from parallel to serial?

The full POC is on github, which can be found here: https://github.com/YungFrikandelbroodje/SearchPOC

This is just to demonstrate the issue. I know an extension like this wouldn't really have any use, but it shows the exact problem ;)

In the readme, I wrote some more information to make it as clear as possible!

Thanks!

Answer 1

等待大神答复