Match-id-daf7043d5b9449b93aa1cee20aaf82cd485b8c9f

libs/extension/src/background/index.ts

@@ -66,5 +66,6 @@ chrome.runtime.onMessage.addListener(function (message, sender, sendResponse) {
   } else {
     console.log('sender.tab not defined.');
   }
-  return true;
+  // 需要返回消息告知完成通知，否则会出现报错 message port closed before a response was received
+  sendResponse({status: 'ok'});
 });

libs/extension/src/contentScript/index.ts

@@ -25,7 +25,7 @@ window.addEventListener('message', event => {
 
 // 监听来自background的消息
 chrome.runtime.onMessage.addListener(
-  function (message, sender) {
+  function (message, sender, sendResponse) {
     // 该方法可以监听页面 contentScript 和插件的消息
     // 没有 tab 信息说明消息来自插件
     if (!sender.tab && checkMessage(message, DevToolBackground)) {
@@ -33,5 +33,6 @@ chrome.runtime.onMessage.addListener(
       // 传递消息给页面
       window.postMessage(message, '*');
     }
+    sendResponse({status: 'ok'});
   }
 );

libs/extension/src/panel/App.tsx

@@ -68,10 +68,22 @@ if (!isDev) {
 }
 
 function postMessage(type: string, data: any) {
-  connection.postMessage(packagePayload({
-    type: type,
-    data: data,
-  }, DevToolPanel));
+  try {
+    connection.postMessage(packagePayload({
+      type: type,
+      data: data,
+    }, DevToolPanel));
+  } catch(err) {
+    // 可能出现 port 关闭的场景，需要重新建立连接，增加可靠性
+    console.error(err);
+    connection = chrome.runtime.connect({
+      name: 'panel'
+    });
+    connection.postMessage(packagePayload({
+      type: type,
+      data: data,
+    }, DevToolPanel));
+  }
 }
 
 function App() {