fix[devtools/extension]: added a workaround for proxy content script injection in firefox

Author: hoxyq

packages/react-devtools-extensions/src/background/index.js

@@ -60,6 +60,12 @@ function isNumeric(str: string): boolean {
 
 chrome.runtime.onConnect.addListener(port => {
   if (port.name === 'proxy') {
+    // Might not be present for restricted pages in Firefox
+    if (port.sender?.tab?.id == null) {
+      // Not disconnecting it, so it would not reconnect
+      return;
+    }
+
     // Proxy content script is executed in tab, so it should have it specified.
     const tabId = port.sender.tab.id;
 

packages/react-devtools-extensions/src/contentScripts/proxy.js

@@ -2,22 +2,38 @@
 
 'use strict';
 
-let port = null;
-let backendInitialized: boolean = false;
-
-connectPort();
-sayHelloToBackendManager();
+window.addEventListener('pageshow', function ({target}) {
+  // Firefox's behaviour for injecting this content script can be unpredictable
+  // While navigating the history, some content scripts might not be re-injected and still be alive
+  if (!window.__REACT_DEVTOOLS_PROXY_INJECTED__) {
+    window.__REACT_DEVTOOLS_PROXY_INJECTED__ = true;
 
-// The backend waits to install the global hook until notified by the content script.
-// In the event of a page reload, the content script might be loaded before the backend manager is injected.
-// Because of this we need to poll the backend manager until it has been initialized.
-const intervalID = setInterval(() => {
-  if (backendInitialized) {
-    clearInterval(intervalID);
-  } else {
+    connectPort();
     sayHelloToBackendManager();
+
+    // The backend waits to install the global hook until notified by the content script.
+    // In the event of a page reload, the content script might be loaded before the backend manager is injected.
+    // Because of this we need to poll the backend manager until it has been initialized.
+    const intervalID = setInterval(() => {
+      if (backendInitialized) {
+        clearInterval(intervalID);
+      } else {
+        sayHelloToBackendManager();
+      }
+    }, 500);
+  }
+});
+
+window.addEventListener('pagehide', function ({target}) {
+  if (target !== window.document) {
+    return;
   }
-}, 500);
+
+  delete window.__REACT_DEVTOOLS_PROXY_INJECTED__;
+});
+
+let port = null;
+let backendInitialized: boolean = false;
 
 function sayHelloToBackendManager() {
   window.postMessage(