Improve activation logic, enhance background connection handling, and ensure DOM elements are present in popup

Author: Manu Nair

packages/clarity-devtools/src/clarity.ts

@@ -5,6 +5,7 @@ import { clarity, version, helper } from "clarity-js";
     if (typeof window !== "undefined") {
         const w = window as any;
         const c = 'clarity';
+        let isStarted = false;
 
         // Stop any existing instance of clarity-js
         if (w[c]) { w[c]("stop"); }
@@ -18,8 +19,15 @@ import { clarity, version, helper } from "clarity-js";
         window.postMessage({ action: "wireup" }, "*");
 
         // V3 CSP: Listen for settings via CustomEvent (replaces inline script injection)
-        window.addEventListener('clarity-devtools-settings', (event: any) => {
+        const settingsHandler = (event: any) => {
+            if (isStarted) {
+                console.log('[Clarity DevTools] Clarity: Already started, ignoring duplicate settings event');
+                return;
+            }
+            
             const settings = event.detail;
+            isStarted = true;
+            
             w[c]("start", {
                 delay: 500,
                 lean: settings.leanMode,
@@ -32,6 +40,8 @@ import { clarity, version, helper } from "clarity-js";
                 upload: (data: string): void => { window.postMessage({ action: "upload", payload: data }, "*"); },
                 projectId: "devtools"
             });
-        });
+        };
+        
+        window.addEventListener('clarity-devtools-settings', settingsHandler, { once: true });
     }
 })();

packages/clarity-devtools/src/content.ts

@@ -37,44 +37,53 @@ async function activate(): Promise<void> {
     return;
   }
 
+  // Set flag immediately to prevent race condition
+  isActivated = true;
   console.log('[Clarity DevTools] Content: Activating Clarity tracking...');
 
   if (document.body) {
-    setup(chrome.runtime.getURL('clarity.js'));
-    isActivated = true;
-    console.log('[Clarity DevTools] Content: Clarity activated successfully');
+    if (!setup(chrome.runtime.getURL('clarity.js'))) {
+      isActivated = false; // Reset if setup fails
+      console.error('[Clarity DevTools] Content: Clarity activation failed');
+    } else {
+      console.log('[Clarity DevTools] Content: Clarity activated successfully');
+    }
   } else {
     if (document.readyState === 'loading') {
       await new Promise<void>(resolve => {
         document.addEventListener('DOMContentLoaded', () => {
-          setup(chrome.runtime.getURL('clarity.js'));
-          isActivated = true;
+          if (!setup(chrome.runtime.getURL('clarity.js'))) {
+            isActivated = false; // Reset if setup fails
+          }
           resolve();
         }, { once: true });
       });
     } else {
       await new Promise(resolve => setTimeout(resolve, 100));
-      setup(chrome.runtime.getURL('clarity.js'));
-      isActivated = true;
+      if (!setup(chrome.runtime.getURL('clarity.js'))) {
+        isActivated = false; // Reset if setup fails
+      }
     }
   }
 }
 
-function setup(url: string): void {
+function setup(url: string): boolean {
   if (!document.body) {
-    console.error('Clarity DevTools: document.body not available');
-    return;
+    console.error('[Clarity DevTools] Content: document.body not available, setup failed');
+    return false;
+  }
+  
+  // Only set up once - if already set up, return success
+  if (messageListener) {
+    console.log('[Clarity DevTools] Content: Message listener already registered, skipping setup');
+    return true;
   }
 
   const script = document.createElement("script");
   script.setAttribute('type', 'text/javascript');
   script.setAttribute('src', url);
   document.body.appendChild(script);
 
-  if (messageListener) {
-    window.removeEventListener("message", messageListener);
-  }
-  
   messageListener = function(event: MessageEvent): void {
       if (event.source === window && event.data?.action) {
         switch (event.data.action) {
@@ -106,6 +115,7 @@ function setup(url: string): void {
   };
 
   window.addEventListener("message", messageListener);
+  return true;
 }
 
 async function upload(data: string): Promise<void> {

packages/clarity-devtools/src/panel.ts

@@ -10,6 +10,8 @@ let retryCount = 0;
 const MAX_RETRIES = 5;
 const RETRY_DELAY = 200;
 let isReconnecting = false;
+let disconnectListener: (() => void) | null = null;
+let messageListener: ((message: { action?: string; payload?: string }) => void) | null = null;
 
 let sessionId = "";
 let pageNum = 0;
@@ -53,6 +55,12 @@ function connectToBackground(): void {
     try {
         if (background) {
             try {
+                if (disconnectListener) {
+                    background.onDisconnect.removeListener(disconnectListener);
+                }
+                if (messageListener) {
+                    background.onMessage.removeListener(messageListener);
+                }
                 background.disconnect();
             } catch (e) {
                 // Ignore disconnect errors
@@ -62,7 +70,7 @@ function connectToBackground(): void {
         background = chrome.runtime.connect({ name: "panel" });
         console.log('[Clarity DevTools] Panel: Connected to background, port name:', background.name);
 
-        background.onDisconnect.addListener(() => {
+        disconnectListener = () => {
             console.log('[Clarity DevTools] Panel: Background connection disconnected');
             isReconnecting = false;
 
@@ -73,9 +81,11 @@ function connectToBackground(): void {
             } else {
                 console.error('[Clarity DevTools] Panel: Max reconnection attempts reached');
             }
-        });
+        };
+        background.onDisconnect.addListener(disconnectListener);
 
-        background.onMessage.addListener(handleMessage);
+        messageListener = handleMessage;
+        background.onMessage.addListener(messageListener);
 
         console.log('[Clarity DevTools] Panel: Sending init message for tab', activeTabId);
         background.postMessage({ action: "init", tabId: activeTabId });

packages/clarity-devtools/src/popup.ts

@@ -1,8 +1,13 @@
-(async function(): Promise<void> {
+async function init(): Promise<void> {
     let state = { showText: true, leanMode : false };
     let showText = (document.getElementById("showText") as HTMLInputElement);
     let leanMode = (document.getElementById("leanMode") as HTMLInputElement);
 
+    if (!showText || !leanMode) {
+        console.error('[Clarity DevTools] Popup: DOM elements not found');
+        return;
+    }
+
     try {
         const items = await chrome.storage.sync.get({clarity: state});
         state = items.clarity;
@@ -36,4 +41,10 @@
         showText.checked = update.showText;
         leanMode.checked = update.leanMode;
     }
-})();
+}
+
+if (document.readyState === 'loading') {
+    document.addEventListener('DOMContentLoaded', init);
+} else {
+    init();
+}