Fix popup.js: match new HTML element IDs, null-safe all DOM access, wrap all chrome calls in try/catch

extension/popup.js

@@ -1,18 +1,27 @@
 /**
- * ClauseGuard — Popup Script
- * Shows scan summary, usage, and quick actions
+ * ClauseGuard — Popup Script (matches redesigned popup.html)
  */
 
 document.addEventListener("DOMContentLoaded", async () => {
   const resultsView = document.getElementById("results-view");
   const emptyView = document.getElementById("empty-view");
 
+  if (!resultsView || !emptyView) return;
+
   // Get current tab
-  const [tab] = await chrome.tabs.query({ active: true, currentWindow: true });
+  let tab;
+  try {
+    const [t] = await chrome.tabs.query({ active: true, currentWindow: true });
+    tab = t;
+  } catch { return; }
+
   if (!tab?.id) return;
 
-  // Load stored results for this tab
-  const results = await chrome.runtime.sendMessage({ type: "GET_RESULTS", tabId: tab.id });
+  // Load stored results
+  let results = null;
+  try {
+    results = await chrome.runtime.sendMessage({ type: "GET_RESULTS", tabId: tab.id });
+  } catch {}
 
   if (results && results.risk_score !== undefined) {
     showResults(results);
@@ -22,61 +31,88 @@ document.addEventListener("DOMContentLoaded", async () => {
   }
 
   // Load usage
-  const usage = await chrome.runtime.sendMessage({ type: "CHECK_USAGE" });
-  updateUsage(usage);
-
-  // ─── Buttons ───
-  document.getElementById("btn-scan")?.addEventListener("click", async () => {
-    const btn = document.getElementById("btn-scan");
-    btn.textContent = "⏳ Scanning...";
-    btn.disabled = true;
-
-    try {
-      await chrome.tabs.sendMessage(tab.id, { type: "TRIGGER_SCAN" });
-      // Wait a moment then reload results
-      setTimeout(async () => {
-        const newResults = await chrome.runtime.sendMessage({ type: "GET_RESULTS", tabId: tab.id });
-        if (newResults) showResults(newResults);
-        btn.textContent = "🔍 Scan This Page";
-        btn.disabled = false;
-      }, 2000);
-    } catch {
-      btn.textContent = "❌ Error — try refreshing the page";
-      btn.disabled = false;
-    }
-  });
+  try {
+    const usage = await chrome.runtime.sendMessage({ type: "CHECK_USAGE" });
+    updateUsage(usage);
+  } catch {}
+
+  // Scan button
+  const btnScan = document.getElementById("btn-scan");
+  if (btnScan) {
+    btnScan.addEventListener("click", async () => {
+      btnScan.innerHTML = '<svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M3 7V5a2 2 0 0 1 2-2h2"/><path d="M17 3h2a2 2 0 0 1 2 2v2"/><path d="M21 17v2a2 2 0 0 1-2 2h-2"/><path d="M7 21H5a2 2 0 0 1-2-2v-2"/><line x1="7" x2="17" y1="12" y2="12"/></svg> Scanning...';
+      btnScan.disabled = true;
+
+      try {
+        await chrome.tabs.sendMessage(tab.id, { type: "TRIGGER_SCAN" });
+        setTimeout(async () => {
+          try {
+            const newResults = await chrome.runtime.sendMessage({ type: "GET_RESULTS", tabId: tab.id });
+            if (newResults && newResults.risk_score !== undefined) showResults(newResults);
+          } catch {}
+          btnScan.innerHTML = '<svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M3 7V5a2 2 0 0 1 2-2h2"/><path d="M17 3h2a2 2 0 0 1 2 2v2"/><path d="M21 17v2a2 2 0 0 1-2 2h-2"/><path d="M7 21H5a2 2 0 0 1-2-2v-2"/><path d="M7 12h10"/></svg> Scan this page';
+          btnScan.disabled = false;
+        }, 3000);
+      } catch {
+        btnScan.textContent = "Error — refresh and retry";
+        btnScan.disabled = false;
+      }
+    });
+  }
 
-  document.getElementById("btn-rescan")?.addEventListener("click", async () => {
-    await chrome.tabs.sendMessage(tab.id, { type: "TRIGGER_SCAN" });
-    window.close();
-  });
+  // Re-scan button
+  const btnRescan = document.getElementById("btn-rescan");
+  if (btnRescan) {
+    btnRescan.addEventListener("click", async () => {
+      try { await chrome.tabs.sendMessage(tab.id, { type: "TRIGGER_SCAN" }); } catch {}
+      window.close();
+    });
+  }
 
-  document.getElementById("btn-details")?.addEventListener("click", () => {
-    chrome.sidePanel.open({ tabId: tab.id });
-    window.close();
-  });
+  // Details button
+  const btnDetails = document.getElementById("btn-details");
+  if (btnDetails) {
+    btnDetails.addEventListener("click", () => {
+      try { chrome.sidePanel.open({ tabId: tab.id }); } catch {}
+      window.close();
+    });
+  }
 });
 
 function showResults(results) {
-  document.getElementById("results-view").style.display = "block";
-  document.getElementById("empty-view").style.display = "none";
+  const rv = document.getElementById("results-view");
+  const ev = document.getElementById("empty-view");
+  if (rv) rv.style.display = "block";
+  if (ev) ev.style.display = "none";
 
-  document.getElementById("risk-score").textContent = results.risk_score;
+  // Score
+  const scoreEl = document.getElementById("risk-score");
+  if (scoreEl) scoreEl.textContent = results.risk_score;
 
-  const grade = results.grade || "?";
+  // Grade badge
+  const grade = results.grade || "C";
   const badge = document.getElementById("grade-badge");
-  const gradeMap = {
-    F: { class: "grade-f", label: "🔴 F — DANGEROUS" },
-    D: { class: "grade-d", label: "🟠 D — RISKY" },
-    C: { class: "grade-c", label: "🟡 C — CAUTION" },
-    B: { class: "grade-b", label: "🟢 B — MOSTLY FAIR" },
-    A: { class: "grade-a", label: "✅ A — FAIR" },
-  };
-  const g = gradeMap[grade] || gradeMap["C"];
-  badge.className = `grade ${g.class}`;
-  badge.textContent = g.label;
-
-  // Count severities
+  if (badge) {
+    const gradeMap = {
+      F: { cls: "grade-f", label: "Grade F" },
+      D: { cls: "grade-d", label: "Grade D" },
+      C: { cls: "grade-c", label: "Grade C" },
+      B: { cls: "grade-b", label: "Grade B" },
+      A: { cls: "grade-a", label: "Grade A" },
+    };
+    const g = gradeMap[grade] || gradeMap.C;
+    badge.className = "grade " + g.cls;
+    badge.textContent = g.label;
+  }
+
+  // Progress bar
+  const bar = document.getElementById("bar-fill");
+  if (bar) {
+    bar.style.width = results.risk_score + "%";
+    bar.className = "bar-fill " + (results.risk_score >= 60 ? "bar-red" : results.risk_score >= 30 ? "bar-amber" : "bar-green");
+  }
+
+  // Severity counts
   const counts = { HIGH: 0, MEDIUM: 0, LOW: 0 };
   (results.results || []).forEach(r => {
     (r.categories || []).forEach(c => {
@@ -84,22 +120,26 @@ function showResults(results) {
     });
   });
 
-  document.getElementById("count-high").textContent = counts.HIGH;
-  document.getElementById("count-med").textContent = counts.MEDIUM;
-  document.getElementById("count-low").textContent = counts.LOW;
+  const cHigh = document.getElementById("c-high");
+  const cMed = document.getElementById("c-med");
+  const cLow = document.getElementById("c-low");
+  if (cHigh) cHigh.textContent = counts.HIGH;
+  if (cMed) cMed.textContent = counts.MEDIUM;
+  if (cLow) cLow.textContent = counts.LOW;
 }
 
 function updateUsage(usage) {
   if (!usage) return;
   const text = document.getElementById("usage-text");
   const fill = document.getElementById("usage-fill");
+  if (!text || !fill) return;
 
   if (usage.plan === "free") {
-    text.textContent = `Free: ${usage.used}/${usage.limit} scans`;
-    fill.style.width = `${Math.min(100, (usage.used / usage.limit) * 100)}%`;
+    text.textContent = "Free: " + usage.used + "/" + usage.limit + " scans";
+    fill.style.width = Math.min(100, (usage.used / usage.limit) * 100) + "%";
     if (usage.used >= usage.limit) fill.style.background = "#ef4444";
   } else {
-    text.textContent = `${usage.plan.toUpperCase()} plan — unlimited`;
+    text.textContent = usage.plan.toUpperCase() + " — unlimited";
     fill.style.width = "100%";
     fill.style.background = "#22c55e";
   }