From 9c8499d4179a53996def01b9321730caac5c82b5 Mon Sep 17 00:00:00 2001
From: Mengdi Chen <mengdi@fb.com>
Date: Fri, 27 Jan 2023 16:17:11 -0500
Subject: [PATCH 1/3] [DevTools] rebuild double pipe on extension

---
 .../src/background.js                         | 24 +++++++++++++++----
 1 file changed, 20 insertions(+), 4 deletions(-)

diff --git a/packages/react-devtools-extensions/src/background.js b/packages/react-devtools-extensions/src/background.js
index 5b33330994581..e7a24af8bad3c 100644
--- a/packages/react-devtools-extensions/src/background.js
+++ b/packages/react-devtools-extensions/src/background.js
@@ -51,7 +51,9 @@ chrome.runtime.onConnect.addListener(function(port) {
   ports[tab][name] = port;
 
   if (ports[tab].devtools && ports[tab]['content-script']) {
-    doublePipe(ports[tab].devtools, ports[tab]['content-script']);
+    doublePipe(ports[tab].devtools, ports[tab]['content-script'], tab);
+    // clean up so that we can rebuild the double pipe if the page is reloaded
+    ports[tab] = null;
   }
 });
 
@@ -70,14 +72,28 @@ function installProxy(tabId: number) {
   }
 }
 
-function doublePipe(one, two) {
+function doublePipe(one, two, tabId) {
   one.onMessage.addListener(lOne);
   function lOne(message) {
-    two.postMessage(message);
+    try {
+      two.postMessage(message);
+    } catch(e) {
+      if (__DEV__) {
+        console.log(`Broken pipe ${tabId}: `, e);
+      }
+      shutdown();
+    }
   }
   two.onMessage.addListener(lTwo);
   function lTwo(message) {
-    one.postMessage(message);
+    try {
+      one.postMessage(message);
+    } catch (e) {
+      if (__DEV__) {
+        console.log(`Broken pipe ${tabId}: `, e);
+      }
+      shutdown();
+    }
   }
   function shutdown() {
     one.onMessage.removeListener(lOne);

From ba7e1ae8b7e18b38f7dda210f2a709846d491797 Mon Sep 17 00:00:00 2001
From: Mengdi Chen <mengdi@fb.com>
Date: Fri, 27 Jan 2023 16:39:50 -0500
Subject: [PATCH 2/3] fix lint

---
 packages/react-devtools-extensions/src/background.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/react-devtools-extensions/src/background.js b/packages/react-devtools-extensions/src/background.js
index e7a24af8bad3c..c28aecb6f2336 100644
--- a/packages/react-devtools-extensions/src/background.js
+++ b/packages/react-devtools-extensions/src/background.js
@@ -77,7 +77,7 @@ function doublePipe(one, two, tabId) {
   function lOne(message) {
     try {
       two.postMessage(message);
-    } catch(e) {
+    } catch (e) {
       if (__DEV__) {
         console.log(`Broken pipe ${tabId}: `, e);
       }

From c13df9656d13fce359622aa350d7e08944f77e81 Mon Sep 17 00:00:00 2001
From: Mengdi Chen <mengdi@fb.com>
Date: Thu, 2 Feb 2023 17:04:00 -0500
Subject: [PATCH 3/3] better timing to cleanup & check registerContentScripts
 error

---
 .../src/background.js                         | 43 +++++++++++--------
 1 file changed, 26 insertions(+), 17 deletions(-)

diff --git a/packages/react-devtools-extensions/src/background.js b/packages/react-devtools-extensions/src/background.js
index c28aecb6f2336..dfb4b74cd46c4 100644
--- a/packages/react-devtools-extensions/src/background.js
+++ b/packages/react-devtools-extensions/src/background.js
@@ -12,22 +12,31 @@ if (!IS_FIREFOX) {
   // It's critical since it allows us to directly run scripts on the "main" world on the page
   // "document_start" allows it to run before the page's scripts
   // so the hook can be detected by react reconciler
-  chrome.scripting.registerContentScripts([
-    {
-      id: 'hook',
-      matches: ['<all_urls>'],
-      js: ['build/installHook.js'],
-      runAt: 'document_start',
-      world: chrome.scripting.ExecutionWorld.MAIN,
-    },
-    {
-      id: 'renderer',
-      matches: ['<all_urls>'],
-      js: ['build/renderer.js'],
-      runAt: 'document_start',
-      world: chrome.scripting.ExecutionWorld.MAIN,
+  chrome.scripting.registerContentScripts(
+    [
+      {
+        id: 'hook',
+        matches: ['<all_urls>'],
+        js: ['build/installHook.js'],
+        runAt: 'document_start',
+        world: chrome.scripting.ExecutionWorld.MAIN,
+      },
+      {
+        id: 'renderer',
+        matches: ['<all_urls>'],
+        js: ['build/renderer.js'],
+        runAt: 'document_start',
+        world: chrome.scripting.ExecutionWorld.MAIN,
+      },
+    ],
+    function() {
+      // When the content scripts are already registered, an error will be thrown.
+      // It happens when the service worker process is incorrectly duplicated.
+      if (chrome.runtime.lastError) {
+        console.error(chrome.runtime.lastError);
+      }
     },
-  ]);
+  );
 }
 
 chrome.runtime.onConnect.addListener(function(port) {
@@ -52,8 +61,6 @@ chrome.runtime.onConnect.addListener(function(port) {
 
   if (ports[tab].devtools && ports[tab]['content-script']) {
     doublePipe(ports[tab].devtools, ports[tab]['content-script'], tab);
-    // clean up so that we can rebuild the double pipe if the page is reloaded
-    ports[tab] = null;
   }
 });
 
@@ -100,6 +107,8 @@ function doublePipe(one, two, tabId) {
     two.onMessage.removeListener(lTwo);
     one.disconnect();
     two.disconnect();
+    // clean up so that we can rebuild the double pipe if the page is reloaded
+    ports[tabId] = null;
   }
   one.onDisconnect.addListener(shutdown);
   two.onDisconnect.addListener(shutdown);