解决Chrome插件通信报错：“The message port closed before a response was received.“

前言：

最近在完成一个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;//添加这一行
 });