Chrome 扩展 - 消息端口在收到响应之前关闭

Question

我在简单的 chrome 扩展中收到此错误。我正在尝试将一些消息从 background.js 传递到我的内容脚本。第一条消息将毫无问题地发送，但第二条消息给我这个错误_generated_background_page.html:1 Unchecked runtime.lastError: The message port closed before a response was received.

我需要在收到第一条消息后传递内容脚本的响应，这是因为我需要从中删除事件侦听器，webRequest.onCompleted否则我将遇到消息传递的循环问题。我不确定我是否在removeListener功能上也做得很好。

这是我的代码，任何帮助将不胜感激

内容脚本.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);
    });
});

背景.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.net/*/*prog_index.m3u8*"],
    types: ["xmlhttprequest"]
},["responseHeaders"]);

Answer 1

您正在发送一条新消息，而不是回复。并且失败了，因为后台脚本中没有对应的onMessage。

让我们正确使用简单的消息传递示例。

1. 在onMessage中添加sendResponse参数：

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

2. 使用sendResponse而不是chrome.runtime.sendMessage

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