I am finding the 'Uncaught (in promise) Error: A listener indicated an asynchronous response by returning true, but the message channel closed before a response was received' error in the background.js. My chrome extension works but the dev tools displays a lot of these errors on background.js

I recently migrated my chrome extension from Manifest V2 to Manifest V3 and since then I am finding the error.

This is the place from where the error seems to be arising :

const browser = chrome || browser;

// Listen for messages from content script
browser.runtime.onMessage.addListener(
    function (request, sender, sendResponse) {
         var frameId = sender.frameId || 0;

            if (request.type == "connect") {               
                connect(sender.tab, frameId);
                sendResponse({ success: true });
            } else if (request.type == "disconnect") {                
                disconnect(sender.tab, frameId);
                sendResponse({ success: true });
            } else if (request.type == "send") {
                sendNativeMessage(request.data, sender.tab);
                document.addEventListener('nativeMessage',
                    function handleNativeMessage(e) {
                        sendResponse(e.detail);
                        document.removeEventListener(e.type, handleNativeMessage);
                    }, false);

               sendResponse({});                
               return true;
            }               
    });

The sendresponse is processed in ContentScript :

const browser = chrome || browser;
self.addEventListener("message", function(event){
    var request = event.data;
    if(request != null && request.type == "SendMessage")
    {
        ProcessNativeMessage(request.data);
    }
    
});

function ProcessNativeMessage(nativeMessageData) {
  var request = new Object();
  request.data = nativeMessageData;
  browser.runtime.sendMessage(request,handleExtensionResponse);
}

function handleExtensionResponse(value)
{
    //alert(value);
};

I played around by returning true, returning false, returning undefined, sending empty response and even disabling the other extensions but none of these changes worked.

I even tried changing the code with async/await as suggested here but it makes no difference.

I am finding the 'Uncaught (in promise) Error: A listener indicated an asynchronous response by returning true, but the message channel closed before a response was received' error in the background.js. My chrome extension works but the dev tools displays a lot of these errors on background.js

I recently migrated my chrome extension from Manifest V2 to Manifest V3 and since then I am finding the error.

This is the place from where the error seems to be arising :

const browser = chrome || browser;

// Listen for messages from content script
browser.runtime.onMessage.addListener(
    function (request, sender, sendResponse) {
         var frameId = sender.frameId || 0;

            if (request.type == "connect") {               
                connect(sender.tab, frameId);
                sendResponse({ success: true });
            } else if (request.type == "disconnect") {                
                disconnect(sender.tab, frameId);
                sendResponse({ success: true });
            } else if (request.type == "send") {
                sendNativeMessage(request.data, sender.tab);
                document.addEventListener('nativeMessage',
                    function handleNativeMessage(e) {
                        sendResponse(e.detail);
                        document.removeEventListener(e.type, handleNativeMessage);
                    }, false);

               sendResponse({});                
               return true;
            }               
    });

The sendresponse is processed in ContentScript :

const browser = chrome || browser;
self.addEventListener("message", function(event){
    var request = event.data;
    if(request != null && request.type == "SendMessage")
    {
        ProcessNativeMessage(request.data);
    }
    
});

function ProcessNativeMessage(nativeMessageData) {
  var request = new Object();
  request.data = nativeMessageData;
  browser.runtime.sendMessage(request,handleExtensionResponse);
}

function handleExtensionResponse(value)
{
    //alert(value);
};

I played around by returning true, returning false, returning undefined, sending empty response and even disabling the other extensions but none of these changes worked.

I even tried changing the code with async/await as suggested here but it makes no difference.

• javascript
• google-chrome-extension
• promise
• chrome-extension-manifest-v3
• chrome-native-messaging

• chrome.runtime.onMessage.addListener(function(message, sender, sendResponse){ // ..code sendResponse({}); return true; }); – John Yepthomi Commented Aug 19, 2022 at 11:19
• Keeping all your code the same just include an empty send response along with return true at the bottom outside of all the if statements. The sendResponse({}) will keep chrome quiet for this particular call and it's aware that there will also be another response later too indicated by return true. – John Yepthomi Commented Aug 19, 2022 at 11:25
• @JohnYepthomi : The sendResponse({}) at the bottom (before returning true) didn't worked. – DotNetSpartan Commented Aug 19, 2022 at 11:30
• There's no need for return true in the first two ifs because they respond synchronously. Only the third if needs it, so you should move this line inside the if block. – woxxom Commented Aug 19, 2022 at 12:13
• @wOxxOm I moved the empty sendResponse and return true to the third if (Please find the updated code in the question). Now it's better than before as the error is seen after 4-5 navigation clicks to native host application, Earlier the error was seen after 2-3 navigation clicks to the native host app . But the error still occurs. – DotNetSpartan Commented Aug 19, 2022 at 12:36

1 Answer 1

Does anything change if you rewrite the code like this?
Anyway I can't reproduce an extension with native messaging.

const browser = chrome || browser;

var globSendResp, globReqTypeSend;      //(*)

// Listen for messages from content script
browser.runtime.onMessage.addListener(function(request, sender, sendResponse) {
    var frameId = sender.frameId || 0;
    globReqTypeSend = false;            //(*)
    if (request.type == "connect") {               
        connect(sender.tab, frameId);
        sendResponse({ success: true });
    } else if (request.type == "disconnect") {                
        disconnect(sender.tab, frameId);
        sendResponse({ success: true });
    } else if (request.type == "send") {
        globReqTypeSend = true;         //(*)
        globSendResp = sendResponse;    //(*)
        sendNativeMessage(request.data, sender.tab);
        //sendResponse({});             //(*)
        return true;
    }
});

document.addEventListener('nativeMessage', function handleNativeMessage(e) {
    if (globReqTypeSend)
        globSendResp(e.detail)
}, false);