added more logic to maintain localhost lock in chrome

garrettlchow · garrettlchow · commit ffe67f4950ec · 2025-01-02T10:34:18.000-08:00
diff --git a/src/app/containers/ErrorContainer.tsx b/src/app/containers/ErrorContainer.tsx
@@ -10,18 +10,31 @@ function ErrorContainer(props: ErrorContainerProps): JSX.Element {
     (state: RootState) => state.main,
   );
 
+  // Helper function to check if a URL is localhost
+  const isLocalhost = (url: string): boolean => {
+    return url.startsWith('http://localhost:') || url.startsWith('https://localhost:');
+  };
+
   // Add effect to initialize currentTab if not set
   useEffect(() => {
     const initializeCurrentTab = async () => {
       if (!currentTab) {
         try {
-          // Query for the active tab
-          const [activeTab] = await chrome.tabs.query({ active: true, currentWindow: true });
-          if (activeTab?.id) {
-            dispatch(setTab(activeTab.id));
+          // Query specifically for localhost tabs first
+          const tabs = await chrome.tabs.query({ currentWindow: true });
+          const localhostTab = tabs.find(tab => tab.url && isLocalhost(tab.url));
+          
+          if (localhostTab?.id) {
+            dispatch(setTab(localhostTab.id));
+          } else {
+            // Fallback to active tab if no localhost found
+            const [activeTab] = await chrome.tabs.query({ active: true, currentWindow: true });
+            if (activeTab?.id) {
+              dispatch(setTab(activeTab.id));
+            }
           }
         } catch (error) {
-          console.error('Error getting active tab:', error);
+          console.error('Error getting tab:', error);
         }
       }
     };
@@ -30,52 +43,58 @@ function ErrorContainer(props: ErrorContainerProps): JSX.Element {
   }, [currentTab, dispatch]);
 
   // function that launches the main app and refreshes the page
-  function launch(): void {
-    // Add validation to ensure we have valid data
-    if (!currentTab) {
-      console.warn('No current tab available - attempting to get active tab');
-      // Try to get the active tab when launching
-      chrome.tabs.query({ active: true, currentWindow: true }, (tabs) => {
-        if (tabs[0]?.id) {
-          const activeTabId = tabs[0].id;
-          dispatch(setTab(activeTabId));
-          // Create default payload and launch
-          const defaultPayload = {
-            status: {
-              contentScriptLaunched: false,
-              reactDevToolsInstalled: false,
-              targetPageisaReactApp: false,
-            },
-          };
-          dispatch(launchContentScript(defaultPayload));
-          // Allow the dispatch to complete before refreshing
-          setTimeout(() => {
-            chrome.tabs.reload(activeTabId);
-          }, 100);
+  async function launch(): Promise<void> {
+    try {
+      // If no current tab, try to find localhost tab first
+      if (!currentTab) {
+        const tabs = await chrome.tabs.query({ currentWindow: true });
+        const localhostTab = tabs.find(tab => tab.url && isLocalhost(tab.url));
+        
+        if (localhostTab?.id) {
+          dispatch(setTab(localhostTab.id));
+          await initializeLaunch(localhostTab.id);
+        } else {
+          console.warn('No localhost tab found');
         }
-      });
-      return;
-    }
+        return;
+      }
 
-    if (!tabs || !tabs[currentTab]) {
-      // If no tab data exists, create a minimal valid payload
-      const defaultPayload = {
-        status: {
-          contentScriptLaunched: false,
-          reactDevToolsInstalled: false,
-          targetPageisaReactApp: false,
-        },
-      };
-      dispatch(launchContentScript(defaultPayload));
-    } else {
-      dispatch(launchContentScript(tabs[currentTab]));
+      // Verify current tab is still localhost
+      const tab = await chrome.tabs.get(currentTab);
+      if (!tab.url || !isLocalhost(tab.url)) {
+        // Try to find a localhost tab
+        const tabs = await chrome.tabs.query({ currentWindow: true });
+        const localhostTab = tabs.find(tab => tab.url && isLocalhost(tab.url));
+        
+        if (localhostTab?.id) {
+          dispatch(setTab(localhostTab.id));
+          await initializeLaunch(localhostTab.id);
+        } else {
+          console.warn('No localhost tab found');
+        }
+        return;
+      }
+
+      await initializeLaunch(currentTab);
+    } catch (error) {
+      console.error('Error during launch:', error);
     }
+  }
 
+  async function initializeLaunch(tabId: number): Promise<void> {
+    const defaultPayload = {
+      status: {
+        contentScriptLaunched: false,
+        reactDevToolsInstalled: false,
+        targetPageisaReactApp: false,
+      },
+    };
+
+    dispatch(launchContentScript(defaultPayload));
+    
     // Allow the dispatch to complete before refreshing
     setTimeout(() => {
-      if (currentTab) {
-        chrome.tabs.reload(currentTab);
-      }
+      chrome.tabs.reload(tabId);
     }, 100);
   }
 
@@ -96,8 +115,8 @@ function ErrorContainer(props: ErrorContainerProps): JSX.Element {
             connect with your app and start monitoring state changes.
           </p>
           <p className='error-description'>
-            Important: Reactime requires React Developer Tools to be installed. If you haven't
-            already, please{' '}
+            Important: Reactime requires React Developer Tools to be installed and will only track state 
+            changes on localhost development servers. If you haven't already, please{' '}
             <a
               href='https://chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi?hl=en'
               target='_blank'
@@ -134,4 +153,4 @@ function ErrorContainer(props: ErrorContainerProps): JSX.Element {
   );
 }
 
-export default ErrorContainer;
+export default ErrorContainer;
diff --git a/src/extension/background.js b/src/extension/background.js
@@ -13,6 +13,17 @@ const tabsObj = {};
 // Will store Chrome web vital metrics and their corresponding values.
 const metrics = {};
 
+// Helper function to check if a URL is localhost
+function isLocalhost(url) {
+  return url?.startsWith('http://localhost:') || url?.startsWith('https://localhost:');
+}
+
+// Helper function to find localhost tab
+async function findLocalhostTab() {
+  const tabs = await chrome.tabs.query({ currentWindow: true });
+  return tabs.find((tab) => tab.url && isLocalhost(tab.url));
+}
+
 //keep alive functionality to address port disconnection issues
 function setupKeepAlive() {
   // Clear any existing keep-alive alarms to prevent duplicates
@@ -311,15 +322,24 @@ function changeCurrLocation(tabObj, rootNode, index, name) {
 }
 
 async function getActiveTab() {
-  return new Promise((resolve, reject) => {
-    chrome.tabs.query({ active: true, currentWindow: true }, function (tabs) {
-      if (tabs.length > 0) {
-        resolve(tabs[0].id);
-      } else {
-        reject(new Error('No active tab'));
-      }
-    });
-  });
+  try {
+    // First try to find a localhost tab
+    const localhostTab = await findLocalhostTab();
+    if (localhostTab) {
+      return localhostTab.id;
+    }
+
+    // Fallback to current active tab
+    const tabs = await chrome.tabs.query({ active: true, currentWindow: true });
+    if (tabs.length > 0) {
+      return tabs[0].id;
+    }
+
+    throw new Error('No active tab');
+  } catch (error) {
+    console.error('Error in getActiveTab:', error);
+    throw error;
+  }
 }
 
 /*
@@ -802,24 +822,43 @@ chrome.tabs.onUpdated.addListener((tabId, changeInfo) => {
 });
 
 // When tab view is changed, put the tabId as the current tab
-chrome.tabs.onActivated.addListener((info) => {
+chrome.tabs.onActivated.addListener(async (info) => {
   // Get info about the tab information from tabId
-  chrome.tabs.get(info.tabId, (tab) => {
-    // Never set a reactime instance to the active tab
-    if (!tab.pendingUrl?.match('^chrome-extension')) {
-      activeTab = tab;
-
-      // Send messages to active ports about the tab change
-      if (portsArr.length > 0) {
-        portsArr.forEach((bg) =>
-          bg.postMessage({
-            action: 'changeTab',
-            payload: { tabId: tab.id, title: tab.title },
-          }),
-        );
+  try {
+    const tab = await chrome.tabs.get(info.tabId);
+
+    // Only update activeTab if:
+    // 1. It's not a Reactime extension tab
+    // 2. We don't already have a localhost tab being tracked
+    // 3. Or if it is a localhost tab (prioritize localhost)
+    if (!tab.url?.match('^chrome-extension')) {
+      if (isLocalhost(tab.url)) {
+        // Always prioritize localhost tabs
+        activeTab = tab;
+        if (portsArr.length > 0) {
+          portsArr.forEach((bg) =>
+            bg.postMessage({
+              action: 'changeTab',
+              payload: { tabId: tab.id, title: tab.title },
+            }),
+          );
+        }
+      } else if (!activeTab || !isLocalhost(activeTab.url)) {
+        // Only set non-localhost tab as active if we don't have a localhost tab
+        activeTab = tab;
+        if (portsArr.length > 0) {
+          portsArr.forEach((bg) =>
+            bg.postMessage({
+              action: 'changeTab',
+              payload: { tabId: tab.id, title: tab.title },
+            }),
+          );
+        }
       }
     }
-  });
+  } catch (error) {
+    console.error('Error in tab activation handler:', error);
+  }
 });
 
 // Ensure keep-alive is set up when the extension is installed
