refactor: refactored devtools browser extension scripts to improve po…

…rt management and service worker lifetime (#27215)

Fixes #27119,
#27185.

Fixed:
- React DevTools now works as expected when user performs in-tab
navigation, previously it was just stuck.


https://github.com/facebook/react/assets/28902667/b11c5f84-7155-47a5-8b5a-7e90baca5347

- When user closes browser DevTools panel, we now do some cleanup to
disconnect ports and emit shutdown event for bridge. This should fix the
issue with registering duplicated fibers with the same id in Store.

Changed:
- We reconnect proxy port once in 25 seconds, in order to [keep service
worker
alive](https://developer.chrome.com/docs/extensions/whatsnew/#m110-sw-idle).
- Instead of unregistering dynamically injected content scripts, wen now
get list of already registered scripts and filter them out from scripts
that we want to inject again, see dynamicallyInjectContentScripts.js.
- Split `main.js` and `background.js` into multiple files.

Tested on Chromium and Firefox browsers.

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/dynamicallyInjectContentScripts.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();
+}