refactor: refactored devtools browser extension scripts to improve ports management and service worker lifetime

Author: hoxyq

packages/react-devtools-extensions/firefox/manifest.json

@@ -6,7 +6,7 @@
   "applications": {
     "gecko": {
       "id": "@react-devtools",
-      "strict_min_version": "55.0"
+      "strict_min_version": "102.0"
     }
   },
   "icons": {
@@ -41,7 +41,9 @@
     "file:///*",
     "http://*/*",
     "https://*/*",
-    "clipboardWrite"
+    "clipboardWrite",
+    "scripting",
+    "devtools"
   ],
   "content_scripts": [
     {

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

@@ -0,0 +1,53 @@
+/* global chrome */
+
+import {IS_FIREFOX} from '../utils';
+
+async function dynamicallyInjectContentScripts() {
+  const contentScriptsToInject = [
+    {
+      id: '@react-devtools/hook',
+      js: ['build/installHook.js'],
+      matches: ['<all_urls>'],
+      persistAcrossSessions: true,
+      runAt: 'document_start',
+      world: chrome.scripting.ExecutionWorld.MAIN,
+    },
+    {
+      id: '@react-devtools/renderer',
+      js: ['build/renderer.js'],
+      matches: ['<all_urls>'],
+      persistAcrossSessions: true,
+      runAt: 'document_start',
+      world: chrome.scripting.ExecutionWorld.MAIN,
+    },
+  ];
+
+  try {
+    const alreadyRegisteredContentScripts =
+      await chrome.scripting.getRegisteredContentScripts();
+
+    const scriptsToInjectNow = contentScriptsToInject.filter(
+      scriptToInject =>
+        !alreadyRegisteredContentScripts.some(
+          registeredScript => registeredScript.id === scriptToInject.id,
+        ),
+    );
+
+    if (scriptsToInjectNow.length) {
+      // equivalent logic for Firefox is in prepareInjection.js
+      // Manifest V3 method of injecting content script
+      // TODO(hoxyq): migrate Firefox to V3 manifests
+      // Note: the "world" option in registerContentScripts is only available in Chrome v102+
+      // 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
+      await chrome.scripting.registerContentScripts(scriptsToInjectNow);
+    }
+  } catch (error) {
+    console.error(error);
+  }
+}
+
+if (!IS_FIREFOX) {
+  dynamicallyInjectContentScripts();
+}