Fix auth sync: handle INITIAL_SESSION + TOKEN_REFRESHED events, sync on tab visibility change, remove flaky scripting.executeScript approach, add console.log for debugging

extension/background.js

@@ -84,61 +84,11 @@ chrome.runtime.onMessageExternal.addListener((message, sender, sendResponse) =>
   return true;
 });
 
-// ─── Auto-detect login when user visits website ───
-chrome.tabs.onUpdated.addListener(async (tabId, changeInfo, tab) => {
-  if (changeInfo.status !== "complete" || !tab.url) return;
-
-  // Check if user is on our website
-  const isOurSite = SITE_ORIGINS.some(o => tab.url.startsWith(o)) ||
-    tab.url.includes("clauseguard") || tab.url.includes("localhost:3000");
-
-  if (isOurSite) {
-    // Try to detect auth by injecting a script that reads Supabase session
-    try {
-      await chrome.scripting.executeScript({
-        target: { tabId },
-        func: detectWebsiteAuth,
-        world: "MAIN", // Access page's JS context
-      });
-    } catch(e) {
-      // Scripting might fail on some pages — that's OK
-    }
-  }
-});
-
-// This function runs IN the webpage context
-function detectWebsiteAuth() {
-  try {
-    // Read Supabase session from localStorage
-    const keys = Object.keys(localStorage);
-    const sbKey = keys.find(k => k.startsWith("sb-") && k.endsWith("-auth-token"));
-    if (!sbKey) return;
-
-    const raw = localStorage.getItem(sbKey);
-    if (!raw) return;
-
-    const session = JSON.parse(raw);
-    const token = session?.access_token;
-    const user = session?.user;
-
-    if (token && user) {
-      // Send to extension via externally_connectable
-      const extId = document.querySelector('meta[name="clauseguard-extension-id"]')?.content;
-      // Fallback: use postMessage which content script picks up
-      window.postMessage({
-        type: "CLAUSEGUARD_AUTH_SYNC",
-        token: token,
-        email: user.email || "",
-        name: user.user_metadata?.full_name || user.user_metadata?.name || "",
-        userId: user.id || "",
-        plan: "free", // Will be fetched from profile
-      }, "*");
-    }
-  } catch(e) {}
-}
-
-// ─── Content script picks up auth sync from page ───
-// (This is handled in content.js — see below)
+// Auth sync is handled by:
+// 1. Website's ExtensionBridge component sends postMessage on auth change
+// 2. Content script (content.js) picks it up via window.addEventListener("message")
+// 3. Content script writes to chrome.storage.sync
+// No injection needed — this is the reliable path.
 
 // ─── Core: Analyze ───
 async function handleAnalyze(payload, tabId) {

extension/content.js

@@ -1,6 +1,11 @@
 /**
  * ClauseGuard — Content Script
- * Page scanning + highlighting + auth bridge (listens for website auth sync).
+ * Page scanning + highlighting + auth bridge.
+ * 
+ * Auth bridge: listens for postMessage from the website's ExtensionBridge component.
+ * Content scripts CAN receive window.postMessage from the page — they share the same
+ * window object. The message handler checks event.source === window to ensure it's
+ * from the same page (not an iframe).
  */
 
 (() => {
@@ -11,23 +16,34 @@
   let isScanning = false;
   let currentHighlights = [];
 
-  // ─── Auth Bridge: Listen for auth sync from our website ───
+  // ─── Auth Bridge ───
+  // Listen for auth sync from our website (ExtensionBridge component sends this)
   window.addEventListener("message", (event) => {
-    if (event.data?.type === "CLAUSEGUARD_AUTH_SYNC") {
-      chrome.runtime.sendMessage({
-        type: "ANALYZE_TEXT", // dummy — just to keep SW alive
-      }).catch(() => {});
+    // Only accept from same window (not iframes)
+    if (event.source !== window) return;
+    if (!event.data || event.data.type !== "CLAUSEGUARD_AUTH_SYNC") return;
 
-      // Store auth in extension
+    const { token, email, name, userId, plan } = event.data;
+
+    if (token) {
+      // User is logged in — store auth
       chrome.storage.sync.set({
-        authToken: event.data.token || "",
-        email: event.data.email || "",
-        userName: event.data.name || "",
-        userId: event.data.userId || "",
-        plan: event.data.plan || "free",
+        authToken: token,
+        email: email || "",
+        userName: name || "",
+        userId: userId || "",
+        plan: plan || "free",
         authSource: "website",
         lastSyncAt: Date.now(),
+      }, () => {
+        console.log("ClauseGuard: auth synced from website —", email, plan);
       });
+    } else {
+      // User logged out — clear auth
+      chrome.storage.sync.remove(
+        ["authToken", "email", "userName", "userId", "plan", "authSource", "lastSyncAt"],
+        () => { console.log("ClauseGuard: auth cleared (logout)"); }
+      );
     }
   });
 
@@ -51,7 +67,7 @@
     try {
       const results = await chrome.runtime.sendMessage({ type: "ANALYZE_TEXT", payload: { text, url: window.location.href } });
       if (results && !results.error) { clearHighlights(); highlightResults(results); }
-    } catch (err) { console.error("ClauseGuard:", err); }
+    } catch (err) { /* extension context invalidated — ignore */ }
     isScanning = false;
   }
 
@@ -78,10 +94,7 @@
     let node;
     while ((node = walker.nextNode())) {
       const idx = node.textContent.toLowerCase().indexOf(searchLower);
-      if (idx !== -1) {
-        results.push({ node, startOffset: idx, endOffset: Math.min(idx + searchText.length, node.textContent.length) });
-        break;
-      }
+      if (idx !== -1) { results.push({ node, startOffset: idx, endOffset: Math.min(idx + searchText.length, node.textContent.length) }); break; }
     }
     return results;
   }
@@ -96,7 +109,7 @@
       mark.dataset.categories = JSON.stringify(clauseData.categories);
       mark.addEventListener("mouseenter", showTooltip);
       mark.addEventListener("mouseleave", hideTooltip);
-      mark.addEventListener("click", () => chrome.runtime.sendMessage({ type: "OPEN_SIDEPANEL" }));
+      mark.addEventListener("click", () => { try { chrome.runtime.sendMessage({ type: "OPEN_SIDEPANEL" }); } catch {} });
       range.surroundContents(mark);
       currentHighlights.push(mark);
     } catch (e) {}
@@ -128,7 +141,7 @@
     currentHighlights = [];
   }
 
-  // ─── Auto-scan ───
+  // ─── Auto-scan (debounced) ───
   let scanTimeout = null;
   function debouncedScan() { clearTimeout(scanTimeout); scanTimeout = setTimeout(scanPage, 1500); }
   if (document.readyState === "complete") debouncedScan();

web/components/extension-bridge.tsx

@@ -1,64 +1,95 @@
 "use client";
 
-import { useEffect, useState } from "react";
+import { useEffect } from "react";
 import { createClient } from "@/lib/supabase/client";
 
 /**
- * ExtensionBridge — Add to root layout.
- * Syncs auth state to ClauseGuard Chrome extension.
- * Also detects if extension is installed.
+ * ExtensionBridge — syncs auth to Chrome extension.
+ * Uses window.postMessage which content script picks up.
+ * Handles: initial load, sign in, sign out, token refresh, tab switch.
  */
 export function ExtensionBridge() {
-  const [extensionInstalled, setExtensionInstalled] = useState(false);
   const supabase = createClient();
 
+  function sendAuthToExtension(token: string, email: string, name: string, userId: string, plan: string) {
+    // Content script listens for this via window.addEventListener("message")
+    window.postMessage({
+      type: "CLAUSEGUARD_AUTH_SYNC",
+      token, email, name, userId, plan,
+    }, window.location.origin);
+  }
+
+  async function syncCurrentUser() {
+    try {
+      const { data: { user } } = await supabase.auth.getUser();
+      if (!user) {
+        sendAuthToExtension("", "", "", "", "free");
+        return;
+      }
+
+      const { data: { session } } = await supabase.auth.getSession();
+      if (!session) {
+        sendAuthToExtension("", "", "", "", "free");
+        return;
+      }
+
+      const { data: profile } = await supabase
+        .from("profiles")
+        .select("plan, full_name")
+        .eq("id", user.id)
+        .single();
+
+      sendAuthToExtension(
+        session.access_token,
+        user.email || "",
+        profile?.full_name || user.user_metadata?.full_name || user.user_metadata?.name || "",
+        user.id,
+        profile?.plan || "free",
+      );
+    } catch {}
+  }
+
   useEffect(() => {
-    // Sync auth to extension whenever auth state changes
+    // Sync on initial page load (already logged in user opens new tab)
+    syncCurrentUser();
+
+    // Sync on every auth state change
     const { data: { subscription } } = supabase.auth.onAuthStateChange(async (event, session) => {
-      if (event === "SIGNED_IN" && session) {
-        // Get user profile for plan info
+      // Handle ALL events that mean "user is logged in"
+      if (session && (event === "SIGNED_IN" || event === "INITIAL_SESSION" || event === "TOKEN_REFRESHED")) {
         const { data: profile } = await supabase
           .from("profiles")
           .select("plan, full_name")
           .eq("id", session.user.id)
-          .single();
+          .single()
+          .then(r => r)
+          .catch(() => ({ data: null }));
 
-        // Method 1: postMessage (content script picks it up)
-        window.postMessage({
-          type: "CLAUSEGUARD_AUTH_SYNC",
-          token: session.access_token,
-          email: session.user.email || "",
-          name: profile?.full_name || session.user.user_metadata?.full_name || "",
-          userId: session.user.id,
-          plan: profile?.plan || "free",
-        }, "*");
+        sendAuthToExtension(
+          session.access_token,
+          session.user.email || "",
+          profile?.full_name || session.user.user_metadata?.full_name || "",
+          session.user.id,
+          profile?.plan || "free",
+        );
       }
 
       if (event === "SIGNED_OUT") {
-        window.postMessage({ type: "CLAUSEGUARD_AUTH_SYNC", token: "", email: "", name: "", userId: "", plan: "free" }, "*");
+        sendAuthToExtension("", "", "", "", "free");
       }
     });
 
-    // Also sync on initial load if already logged in
-    supabase.auth.getUser().then(async ({ data: { user } }) => {
-      if (user) {
-        const { data: session } = await supabase.auth.getSession();
-        const { data: profile } = await supabase.from("profiles").select("plan, full_name").eq("id", user.id).single();
-
-        window.postMessage({
-          type: "CLAUSEGUARD_AUTH_SYNC",
-          token: session.session?.access_token || "",
-          email: user.email || "",
-          name: profile?.full_name || "",
-          userId: user.id,
-          plan: profile?.plan || "free",
-        }, "*");
-      }
-    });
+    // Also sync when tab becomes visible (user switches back to this tab)
+    function onVisible() {
+      if (document.visibilityState === "visible") syncCurrentUser();
+    }
+    document.addEventListener("visibilitychange", onVisible);
 
-    return () => subscription.unsubscribe();
+    return () => {
+      subscription.unsubscribe();
+      document.removeEventListener("visibilitychange", onVisible);
+    };
   }, []);
 
-  // This component renders nothing — it's purely for side effects
   return null;
 }