Uncaught (in promise) Error: A listener indicated an asynchronous response by returning true, but the message channel closed before a response was received

This error message indicates that there was a problem with the communication between the listener and the message channel. The listener sent a response indicating that it was ready to receive a message, but the message channel closed before the listener was able to receive the message.

Solution

In most cases the reason is that you call chrome.runtime.sendMessage when the popup is not shown. The popup cannot receive messages if it's not shown. You can suppress the error by using '()=>chrome.runtime.lastError' instead of 'function(response){}' .

Another possible solution would be show the popup in a new window using chrome.windows.create or as a DOM element inside the web page.

Background

This issue is related to cross-origin request and it is caused by various Chrome Extensions. To prevent leaks of sensitive information, web pages are generally not allowed to fetch cross-origin data. Unless a valid CORS header is present on the response, the page's request will fail with an error messages.

There was a change in Chrome that introduced this error message.

const char kReceivingEndDoesntExistError[] = // TODO(lazyboy): Test these in service worker implementation. "Could not establish connection. Receiving end does not exist."; +const char kClosedWhileResponsePendingError[] = + "A listener indicated an asynchronous response by returning true, but the " + "message channel closed before a response was received"; } // namespace

async response to runtime.sendMessage.


Example code:
// sender chrome.runtime.sendMessage('testMessage');
// receiver chrome.runtime.onMessage.addListener((msg, sender, sendResponse) => { doSomethingWithoutResponding(msg); });

The reason is that sendMessage is now promisified internally, so you can 'await' it, but the by-product is that when you don't specify a callback yourselves, it is added internally anyway in order for the call to return a Promise, which means that since you don't call sendResponse in onMessage, the API will think that it was you who made a mistake of using a callback and not providing a response, and report it as such.

Since the new behaviour is very confusing for almost everyone, a solution might be to stop showing this error when the callback is not specified, however it might cause confusion for those developers who still use callbacks and forgot to call sendResponse inside onMessage by mistake, which should be reported ideally as it always was.

If you see your extension causing these errors - inspect closely all your onMessage listeners. Some of them probably need to start returning promises (marking them as async should be enough).

Background script

In many cases, the issue you are facing is background script. It does not invoke sendResponse() for one/more messages it received and went inactive (causing the message channel to close). However, the content script that sent the message is waiting for the response.

In Manifest V3, the Chrome extension platform moves from background pages to service workers. The background script (service worker in MV3) could be going to inactive state without sending a response back to a message it received from a content script.

Background script:
chrome.runtime.onMessage.addListener((request, sender, sendResponse) => { // ... handle message here return true // your error message says you already return true })

The runtime.onMessage event to listen for messages from another part of your extension. Most MV3 APIs are asynchronous and can return promises when it makes sense to do so. Reading a response back however can be done using callbacks or promise-style.

Method-1 : Content script to read response:

chrome.runtime.sendMessage('ping', (response) => { /* read response */ })

Method-2 : Content script to read response:
chrome.runtime.sendMessage('ping').then(response => { /* read response */ })

So, in order to solve your problem, please check your message senders & handlers. Also, if you are an extension developer, You need to return true when fetching data from cross-origins.

Other solutions:

  1. Try disabled all installed extensions in Chrome then you will get a clear console without errors.

Or

  1. Go to chrome://extensions/, you can just toggle each extension one at a time and see which one is actually triggering this issue.
  2. Once you toggle the extension off, refresh the page where you are seeing the error and wiggle the mouse around, or click. Mouse actions are the things that are throwing errors.

So you can able to pinpoint which extension was actually causing the issue and disable it. In this way also you can solve "Uncaught (in promise) Error: A listener indicated an asynchronous response by returning true, but the message channel closed before a response was received" error.



NEXT.....IT - Information Technology