Combine detector and debugger scipts to single real_world script

Author: thetarnav

packages/extension/src/background.ts

@@ -84,14 +84,14 @@ chrome.runtime.onConnect.addListener(port => {
 
 function toggle_action_icon(tab_id: Tab_Id) {
 
-    if (script_content_map.get(tab_id)?.detection?.Solid) {
+    if (script_content_map.get(tab_id)?.detection?.solid) {
         chrome.action.setIcon({tabId: tab_id, path: ICONS_BLUE})
 
         /*
          For some reason setting the icon immediately does not always work
         */
         setTimeout(() => {
-            if (script_content_map.get(tab_id)?.detection?.Solid) {
+            if (script_content_map.get(tab_id)?.detection?.solid) {
                 chrome.action.setIcon({tabId: tab_id, path: ICONS_BLUE})
             } else {
                 chrome.action.setIcon({tabId: tab_id, path: ICONS_GRAY})

packages/extension/src/content.ts

@@ -18,9 +18,7 @@ import {
 } from './shared.ts'
 
 // @ts-expect-error ?script&module query ensures output in ES module format and only import the script path
-import detector_path from './detector.ts?script&module'
-// @ts-expect-error ?script&module query ensures output in ES module format and only import the script path
-import debugger_path from './debugger.ts?script&module'
+import real_world_path from './real_world.ts?script&module'
 
 
 DEV: {log(Place_Name.Content+' loaded.')}
@@ -55,14 +53,14 @@ if (document.readyState === 'complete') {
 function on_loaded() {
 
     /*
-    Load Detect_Real_World script
+    Load Real_World script
     ↳ Debugger_Setup detected
-        ↳ Load Debugger_Real_World
+        ↳ Load Debugger
             ↳ 'Debugger_Connected' message
     */
 
-    loadScriptInRealWorld(detector_path)
-        .catch(err => error(`Detector_Real_World (${detector_path}) failed to load.`, err))
+    loadScriptInRealWorld(real_world_path)
+        .catch(err => error(`Real_World script (${real_world_path}) failed to load.`, err))
 }
 
 
@@ -72,9 +70,6 @@ const port = chrome.runtime.connect({name: ConnectionName.Content})
 
 let devtools_opened = false
 
-// prevent the script to be added multiple times if detected before solid
-let debugger_real_world_added = false
-
 /* From Background */
 port_on_message(port, e => {
     // eslint-disable-next-line @typescript-eslint/switch-exhaustiveness-check
@@ -93,22 +88,6 @@ port_on_message(port, e => {
 window_on_message(e => {
     // eslint-disable-next-line @typescript-eslint/switch-exhaustiveness-check
     switch (e.name) {
-    // From Detector_Real_World
-    case 'Detected': {
-
-        /* Forward to Background script */
-        port_post_message_obj(port, e)
-
-        /* Load Debugger_Real_World */
-        if (e.details && e.details.Debugger && !debugger_real_world_added) {
-            debugger_real_world_added = true
-
-            loadScriptInRealWorld(debugger_path)
-                .catch(err => error(`Debugger_Real_World (${debugger_path}) failed to load.`, err))
-        }
-
-        break
-    }
     case 'Debugger_Connected': {
 
         // eslint-disable-next-line no-console
@@ -122,7 +101,7 @@ window_on_message(e => {
             client:         e.details.client,
             solid:          e.details.solid,
             extension:      extension_version,
-            expectedClient: import.meta.env.EXPECTED_CLIENT,
+            client_expected: import.meta.env.EXPECTED_CLIENT,
         })
 
         if (devtools_opened) {

packages/extension/src/debugger.ts

@@ -22,13 +22,13 @@ function App() {
     const empty_versions: Versions = {
         solid:          '',
         client:         '',
-        expectedClient: '',
+        client_expected: '',
         extension:      '',
     }
     const [versions, setVersions] = s.createSignal<Versions>(empty_versions)
 
     const devtools = frontend.createDevtools()
-    
+
     const port = chrome.runtime.connect({name: ConnectionName.Panel})
     port_on_message(port, e => {
         // eslint-disable-next-line @typescript-eslint/switch-exhaustiveness-check
@@ -58,14 +58,14 @@ function App() {
         >
             <devtools.Devtools
                 headerSubtitle={`#${versions().extension}_${versions().client}/${
-                    versions().expectedClient
+                    versions().client_expected
                 }`}
                 errorOverlayFooter={
                     <ul>
                         <li>Solid: {versions().solid}</li>
                         <li>Extension: {versions().extension}</li>
                         <li>Client: {versions().client}</li>
-                        <li>Expected client: {versions().expectedClient}</li>
+                        <li>Expected client: {versions().client_expected}</li>
                     </ul>
                 }
                 useShortcuts

packages/extension/src/detector.ts

@@ -18,9 +18,9 @@ const port = chrome.runtime.connect({name: ConnectionName.Popup})
 
 const [versions, setVersions] = s.createSignal<Versions | null>(null)
 const empty_detection_state: DetectionState = {
-    Solid:    false,
-    SolidDev: false,
-    Debugger: false,
+    solid:    false,
+    solid_dev: false,
+    setup: false,
 }
 const [detectionState, setDetectionState] = s.createSignal(empty_detection_state)
 
@@ -39,20 +39,20 @@ port_on_message(port, e => {
 const App: s.Component = () => {
     return <>
         <div>
-            <p data-detected={detectionState().Solid}>
-                Solid {detectionState().Solid ? 'detected' : 'not detected'}
+            <p data-detected={detectionState().solid}>
+                Solid {detectionState().solid ? 'detected' : 'not detected'}
             </p>
         </div>
         <div>
-            <p data-detected={detectionState().SolidDev}>
-                Solid Dev Mode {detectionState().SolidDev ? 'detected' : 'not detected'}
+            <p data-detected={detectionState().solid_dev}>
+                Solid Dev Mode {detectionState().solid_dev ? 'detected' : 'not detected'}
             </p>
         </div>
         <div>
-            <p data-detected={detectionState().Debugger}>
-                Debugger {detectionState().Debugger ? 'detected' : 'not detected'}
+            <p data-detected={detectionState().setup}>
+                Debugger {detectionState().setup ? 'detected' : 'not detected'}
             </p>
-            <s.Show when={detectionState().SolidDev && !detectionState().Debugger}>
+            <s.Show when={detectionState().solid_dev && !detectionState().setup}>
                 <div class="details">
                     <p>
                         Devtools extension requires a runtime client to be installed.
@@ -77,7 +77,7 @@ const App: s.Component = () => {
                     <li>Solid ___________ {v.solid || 'unknown'}</li>
                     <li>Extension _______ {v.extension}</li>
                     <li>Client found ____ {v.client || 'unknown'}</li>
-                    <li>Client expected _ {v.expectedClient}</li>
+                    <li>Client expected _ {v.client_expected}</li>
                 </ul>
             </div>
         )}