I get this error in my simple chrome extension. I'm trying to pass some messages from background.js to my content script. The first message will be sent without problems, but the second one give me this error _generated_background_page.html:1 Unchecked runtime.lastError: The message port closed before a response was received.

I need to pass a response from the content script after the first message is recived, this because I need to remove event listener from webRequest.onCompleted otherwise I will get a loop problem with message passing. I'm not sure if I'm doing the things well also with removeListener function.

Here is my code, any help will be appreciated

contentScript.js

const m3u8 = new M3U8(); 
console.log(m3u8);
chrome.runtime.onMessage.addListener( message => {    
    console.log(message);
    chrome.runtime.sendMessage({status: 'ok'})
    const download = m3u8.start(message.url);
    download.on("progress", progress => {
        console.log(progress);
    }).on("finished", finished => {
        console.log(finished);
    }).on("error", error => {
        console.log(error);
    });
});

background.js

const sendURL = (request) => {
    chrome.tabs.sendMessage(request.tabId, {url: request.url}, response => {
        if( response.status === 'ok' ){
            chrome.webRequest.onCompleted.removeListener( sendURL )
        }
        return true;
    })
}

chrome.webRequest.onCompleted.addListener( request => {
    console.log(request);
    sendURL(request)
},{
    urls: ["https://*.myurl/*/*prog_index.m3u8*"],
    types: ["xmlhttprequest"]
},["responseHeaders"]);

I get this error in my simple chrome extension. I'm trying to pass some messages from background.js to my content script. The first message will be sent without problems, but the second one give me this error _generated_background_page.html:1 Unchecked runtime.lastError: The message port closed before a response was received.

I need to pass a response from the content script after the first message is recived, this because I need to remove event listener from webRequest.onCompleted otherwise I will get a loop problem with message passing. I'm not sure if I'm doing the things well also with removeListener function.

Here is my code, any help will be appreciated

contentScript.js

const m3u8 = new M3U8(); 
console.log(m3u8);
chrome.runtime.onMessage.addListener( message => {    
    console.log(message);
    chrome.runtime.sendMessage({status: 'ok'})
    const download = m3u8.start(message.url);
    download.on("progress", progress => {
        console.log(progress);
    }).on("finished", finished => {
        console.log(finished);
    }).on("error", error => {
        console.log(error);
    });
});

background.js

const sendURL = (request) => {
    chrome.tabs.sendMessage(request.tabId, {url: request.url}, response => {
        if( response.status === 'ok' ){
            chrome.webRequest.onCompleted.removeListener( sendURL )
        }
        return true;
    })
}

chrome.webRequest.onCompleted.addListener( request => {
    console.log(request);
    sendURL(request)
},{
    urls: ["https://*.myurl/*/*prog_index.m3u8*"],
    types: ["xmlhttprequest"]
},["responseHeaders"]);

• javascript
• google-chrome-extension

Share Improve this question Follow asked Aug 9, 2020 at 4:46 alfaun0alfaun0 22911 gold badge44 silver badges1515 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 6

You were sending a new message, not a response. And it failed because there was no corresponding onMessage in the background script.

Let's use the simple messaging example correctly.

1. Add sendResponse parameter to onMessage:

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

2. Use sendResponse instead of chrome.runtime.sendMessage

   chrome.runtime.onMessage.addListener((message, sender, sendResponse) => {  
     sendResponse({status: 'ok'});
     //.........
   });