What caused the "Unchecked runtime.lastError: The message port closed before a response was received." warning?

Question

I have searched around but it's all about people complaining the bug. Many posts say that you should check all your extensions.

However, this is something I encountered when I am developing an extension.

Here is how it happens:

I have a listener on background.js:

chrome.extension.onMessage.addListener(function(request, sender, sendResponse) {
  console.log('get:', request);
  if (request.hasOwnProperty('opt')) {
    trackPage('opt/' + request.opt);
  }
  return Promise.resolve("");
});

And here is the trigger in my option page:

track('something');
function track(msg){
  chrome.runtime.sendMessage({opt: msg}, function(response) {
    console.log(response);
  });
}

The error occurs when the track function is fired.

How can I fix the error totally?

Answer 1

You can't return a Promise to make the function async, you have to return true. So change this:

return Promise.resolve("");

To this:

Promise.resolve("").then(result => sendResponse(result));
return true;