adjusted component map size and added port disconenct listerner logic to content script

Author: garrettlchow

src/app/components/StateRoute/ComponentMap/ComponentMap.tsx

@@ -32,8 +32,8 @@ const veryHeavy = '#475569'; // Darker gray for medium load
 const defaultMargin: DefaultMargin = {
   top: 30,
   left: 20,
-  right: 20,
-  bottom: 70,
+  right: 50,
+  bottom: 20,
 };
 
 const nodeCoords: object = {};

src/app/styles/layout/_stateContainer.scss

@@ -12,9 +12,8 @@
 }
 
 .app-content {
-  flex: 1;
+  height: 100%;
   min-height: 0;
-  position: relative;
 }
 
 .main-navbar-container--structural {

src/extension/background.js

@@ -360,13 +360,10 @@ chrome.runtime.onConnect.addListener(async (port) => {
   }
 
   if (Object.keys(tabsObj).length > 0) {
-    console.log('Sending initial snapshots to devtools:', tabsObj);
     port.postMessage({
       action: 'initialConnectSnapshots',
       payload: tabsObj,
     });
-  } else {
-    console.log('No snapshots to send to devtools on reconnect.');
   }
 
   // Handles port disconnection by removing the disconnected port  -ellie
@@ -375,6 +372,17 @@ chrome.runtime.onConnect.addListener(async (port) => {
     if (index !== -1) {
       console.warn(`Port at index ${index} disconnected. Removing it.`);
       portsArr.splice(index, 1);
+
+      // Notify remaining ports about the disconnection
+      portsArr.forEach((remainingPort) => {
+        try {
+          remainingPort.postMessage({
+            action: 'portDisconnect',
+          });
+        } catch (error) {
+          console.warn('Failed to notify port of disconnection:', error);
+        }
+      });
     }
   });
 
@@ -425,13 +433,42 @@ chrome.runtime.onConnect.addListener(async (port) => {
         tabsObj[tabId].mode.paused = payload;
         return true; // return true so that port remains open
 
-      case 'launchContentScript':
-        //if (tab.url?.startsWith("chrome://")) return undefined;
-        chrome.scripting.executeScript({
-          target: { tabId },
-          files: ['bundles/content.bundle.js'],
-        });
+      // Handling the launchContentScript case with proper validation
+      case 'launchContentScript': {
+        if (!tabId) {
+          console.error('No tabId provided for content script injection');
+          return false;
+        }
+
+        try {
+          // Validate the tab exists before injecting
+          chrome.tabs.get(tabId, async (tab) => {
+            if (chrome.runtime.lastError) {
+              console.error('Error getting tab:', chrome.runtime.lastError);
+              return;
+            }
+
+            // Skip injection for chrome:// URLs
+            if (tab.url?.startsWith('chrome://')) {
+              console.warn('Cannot inject scripts into chrome:// URLs');
+              return;
+            }
+
+            try {
+              await chrome.scripting.executeScript({
+                target: { tabId: tab.id },
+                files: ['bundles/content.bundle.js'],
+              });
+              console.log('Content script injected successfully');
+            } catch (err) {
+              console.error('Error injecting content script:', err);
+            }
+          });
+        } catch (err) {
+          console.error('Error in launchContentScript:', err);
+        }
         return true;
+      }
 
       case 'jumpToSnap':
         chrome.tabs.sendMessage(tabId, msg);

src/extension/contentScript.ts

@@ -73,9 +73,17 @@ chrome.runtime.onMessage.addListener((request) => {
       // '*' == target window origin required for event to be dispatched, '*' = no preference
       window.postMessage(request, '*');
     }
-
-    // JR: adding a response to a port disconnection message from background.js
     if (action === 'portDisconnect') {
+      // When we receive a port disconnection message, relay it to the window
+      window.postMessage(
+        {
+          action: 'portDisconnect',
+        },
+        '*',
+      );
+
+      // Attempt to re-establish connection
+      establishConnection();
     }
 
     if (action === 'reinitialize') {