前言:
最近在完成一个Chrome插件小作品的时候,在service-worker.js文件中chrome.runtime.onMessage.addListener 这个监听函数中给content-srcipt.js文件中使用chrome.runtime.sendMessage API 传递异步请求结果时,出现了报错:“The message port closed before a response was received.“查阅资料后找到了解决方案,分享给跟我一样遇见这类问题的小伙伴。
分析:
首先,我们先看报错:“The message port closed before a response was received.“中文意思就是:“消息端口在收到响应之前已关闭。”意思就是当异步接口接口返回结果并传递给content-srcipt.js文件时,接收消息的接口已经关闭
解决方案:
给ervice-worker.js文件中的chrome.runtime.onMessage.addListener这个监听器添加 return true
代码展示:
//content-scripts.js 文件
(async () => {
// 使用 sendMessage 从 Content 发送消息
const response = await chrome.runtime.sendMessage({msg: "hello"});
console.log(response.res);//打印service-worker.js传递过来的值
})
// 使用 onMessage.addListener service-worker.js 接收消息
chrome.runtime.onMessage.addListener(function(request, sender, sendResponse) {
if (request.selection.length !== 0) {
fetch("https://XXXX", {
method: "GET",
headers: {
"Content-Type": "application/json",
Authorization: `Bearer ${token}`,
}
})
.then((response) => {
sendResponse({res:response.data})
})
}
return true;//添加这一行
});