Make Promise wait for a Chrome.runtime.sendMessage

Question

I've always seen Promise work with setTimeout, but I'm trying to make it based on whatever the chrome.runtime.sendMessage returns to the Promise.

I've got a content script that does this function once the script has been done.

chrome.runtime.sendMessage({complete: true});

I've got a background script that loops through every item in an array and uses one of its values to open a URL with chrome.tabs.update.

What I'm trying to do is make the async function wait for the Message the content script is sending and only continue with the next iteration once the message has been received, although I don't know how to implement this since I've only seen examples with setTimeout.

So it should

Open the first item in the array and stop
Execute the content script on that page and do a sendMessage at the end.
Now the background script should be waiting for the sendMessage to be received before going to the next item.
Once the sendMessage has been received with onMessage it should go to the next and item and repeat from step 2

This is the background script.

    chrome.storage.local.get('userItems', function(result) {
    console.log(result.userItems);

    function delay() {
      // I suppose I should do something with onMessage in the delay function
      return new Promise(resolve => setTimeout(resolve, 500));
    }

    async function delayedLog(item) {
      await delay();

      console.log(item);
      var url = "http://www.example.com/" + item.Category;

      chrome.tabs.update({
        url: url
      });
    }

    async function processArray(array) {
      for (const item of array) {
        await delayedLog(item);
      }
    }

    processArray(result.userItems);

    });

user_2724961 · Answer

It is easier to ask a content-script to do its job and answer when it finished.
To make "sendMessage" work with promises you can wrap it:

/**
 * Promise wrapper for chrome.tabs.sendMessage
 * @param tabId
 * @param item
 * @returns {Promise}
 */
function sendMessagePromise(tabId, item) {
    return new Promise((resolve, reject) => {
        chrome.tabs.sendMessage(tabId, {item}, response => {
            if(response.complete) {
                resolve();
            } else {
                reject('Something wrong');
            }
        });
    });
}

The content-script should have something like this:

// waiting for tasks from background
chrome.runtime.onMessage.addListener((msg, sender, sendResponse) => {
    const item = msg.item;

    // Asynchronously process your "item", but DON'T return the promise
    asyncOperation().then(() => {
      // telling that CS has finished its job
      sendResponse({complete: true});
    });

    // return true from the event listener to indicate you wish to send a response asynchronously
    // (this will keep the message channel open to the other end until sendResponse is called).
    return true;
});

user_9134934 · Answer

Adopting from what is shared above, the following example demonstrates sending the response synchronously and asynchronously. This worked for me where I was able to send the request object to the content script and receive the response object back from the content script.

In your background.js, add the following snippet which wraps the promise around the sendMessage function.

function sendMessage(tabId, request) {
    return new Promise((resolve, reject) => {
      chrome.tabs.sendMessage(tabId, request, (response) => {
        if (response.success) {
          resolve(response)
        }
        else {
          reject(response)
        }
      });
    })
}
const tabId = 123;
const request = {id: 1, message: "hello"};
const response = await sendMessage(tabId, request);

response.success ? console.info(response.data) 
                 : console.error(response.message);

In your content script:

const handleRequest = (request, sender, sendResponse) => {
  console.info("Request received...");

  if (request && request.id > 0) {
    doLogic(request.id, sendResponse);

    // return true to send the response asynchronously
    return true;
  }
  else {
    // send synchronous response object back with an error message
    sendResponse({success: false, message: "Invalid Id received"});
  }
}

chrome.runtime.onMessage.addListener(handleRequest);

In your doLogic function:

const doLogic = async (id, sendResponse) => {
  const value= await asyncOperation(id); // awaiting another async call
  sendResponse({success: true, data: value});
};

As shown above, the doLogic() function takes the id and the sendResponse as inputs. Once the doLogic() finishes the await operation inside, then it sends the response.

By sending true in the listener, as mentioned by Denis L, you wish to send the response asynchronously. You can read more on that here where it mentions as shown below:

Executing the example code, you'd receive the following output. Modify the request object to see the change in the output.

Output: world

user_3969006 · Answer

In manifest v3 you can do this:

function sendMessageToTab(tabId, message) {
    return new Promise((resolve) => {
        chrome.tabs.sendMessage(tabId, message, resolve)
    })
}

Make Promise wait for a Chrome.runtime.sendMessage

3 Answers