Tips to prevent encountering the "The response was not received before the message port closed" error while utilizing the await function in the listener

Question

Tips to prevent encountering the "The response was not received before the message port closed" error while utilizing the await function in the listener

I'm currently in the process of developing a chrome extension using the node module "chrome-extension-async" and have encountered an issue with utilizing await within the background listener.

In my setup, the content.js file sends a message to the background script requesting it to perform some asynchronous IO operations:

// content.js
const data = await chrome.runtime.sendMessage({param: ...})
console.log(data)

// background.js
chrome.runtime.onMessage.addListener(async (request, sender, 
sendResponse) => {
    const result  = await performIOOperation();
    sendResponse(result);
})

But unfortunately, Chrome throws errors like this:

Uncaught (in promise) Error: The message port closed before a response was received.

I believe there may be a conflict when using async/await within the listener. Does anyone have any insights on resolving this particular issue?

javascript google-chrome-extension

Answer 1

Answer №1

const asyncFunctionWithAwait = async (request, sender, sendResponse) => {...}

chrome.runtime.onMessage.addListener((request, sender, sendResponse) => {
    asyncFunctionWithAwait(request, sender, sendResponse)

    return true
})

proved effective in my case

Answer 2

const asyncFunctionWithAwait = async (request, sender, sendResponse) => {...}

chrome.runtime.onMessage.addListener((request, sender, sendResponse) => {
    asyncFunctionWithAwait(request, sender, sendResponse)

    return true
})

proved effective in my case

Answer 3

Answer №2

Expanding on all the notes and providing further clarification based on @RomanistHere's response:

// Here are a couple of example asynchronous functions
var greet;
const whatever = async function(){
    greet = "hello";
}
const getSomething = async function(){
    return "bob";
}

// Defining a function outside the callback to make use of async/await.
const asyncFunctionWithAwait = async (request, sender, sendResponse) => {
    
    // We can now use await normally here
    await whatever();
    let name = await getSomething();
    
    // As our response function is passed through "by reference",
    // we can call it as if it were within the listener callback.
    sendResponse(greet + name)

}

chrome.runtime.onMessage.addListener((request, sender, sendResponse) => {

    // Executing within the body of this callback,
    // passing the original function through.
    asyncFunctionWithAwait(request, sender, sendResponse)

    // In accordance with:
    // http://developer.chrome.com/extensions/runtime.html#event-onMessage
    //
    // This function becomes invalid when the event listener returns, 
    // unless you return true from the event listener to indicate that you 
    // want to send a response asynchronously (this will keep the message 
    // channel open until sendResponse (3rd arg) is called).
    return true;

});

Answer 4

Expanding on all the notes and providing further clarification based on @RomanistHere's response:

// Here are a couple of example asynchronous functions
var greet;
const whatever = async function(){
    greet = "hello";
}
const getSomething = async function(){
    return "bob";
}

// Defining a function outside the callback to make use of async/await.
const asyncFunctionWithAwait = async (request, sender, sendResponse) => {
    
    // We can now use await normally here
    await whatever();
    let name = await getSomething();
    
    // As our response function is passed through "by reference",
    // we can call it as if it were within the listener callback.
    sendResponse(greet + name)

}

chrome.runtime.onMessage.addListener((request, sender, sendResponse) => {

    // Executing within the body of this callback,
    // passing the original function through.
    asyncFunctionWithAwait(request, sender, sendResponse)

    // In accordance with:
    // http://developer.chrome.com/extensions/runtime.html#event-onMessage
    //
    // This function becomes invalid when the event listener returns, 
    // unless you return true from the event listener to indicate that you 
    // want to send a response asynchronously (this will keep the message 
    // channel open until sendResponse (3rd arg) is called).
    return true;

});

Tips to prevent encountering the "The response was not received before the message port closed" error while utilizing the await function in the listener

Answer №1

Answer №2

Similar questions

Ways to manage absent embedded expressions in template literals

ACE.js enhances website security through Content Security Policy

How can I validate HTML input elements within a DIV (a visible wizard step) situated within a FORM?

Enabling clients to access all static files from a Node.js + Express server

Autocomplete's `getOptionLabel` function unexpectedly returned an object ([object Object]) instead of the expected string

Is there a way to effectively transfer both Vertex and Face normals to a Three.js shader?

Utilizing setInterval for automatic page refreshing

Efficiently handling multiple JSON objects in a single PHP function

Error: Attempting to create a Discord bot results in a TypeError because the property 'id' is undefined

What is the process for adding a dot to the package.json file using the npm-pkg command?

Is it best practice to store irrelevant context in a separate storage when utilizing the React Context API?

Animation triggered by scrolling is not functioning/displaying div

How can I use AJAX to read an image file and display it on a Canvas?

Utilizing a form on numerous occasions prior to its submission

Can side effects be safely incorporated within the callback of the useState hook?

Regular expression that can be used to extract information from a text file by filtering and returning only

Button Click Not Allowing Webpage Scroll

Issue with updating the vertices in three.js EdgesGeometry is causing the Line Segments to not be updated as expected

Encountered an issue: Error message stating that a Handshake cannot be enqueued as another Handshake has already been enqueued

Modify the BehaviorSubject upon clicking or focusing on the input