popup.js

 1/**
 2 * Impeccable DevTools Extension - Popup
 3 *
 4 * Quick controls: scan, toggle overlays, and see finding count.
 5 */
 6
 7const countNumber = document.getElementById('count-number');
 8const countLabel = document.getElementById('count-label');
 9const btnScan = document.getElementById('btn-scan');
10const btnToggle = document.getElementById('btn-toggle');
11
12let overlaysVisible = true;
13
14async function getActiveTabId() {
15  const [tab] = await chrome.tabs.query({ active: true, currentWindow: true });
16  return tab?.id;
17}
18
19function updateFromState(state) {
20  if (!state) return;
21  const count = state.findings?.reduce((sum, f) => sum + f.findings.length, 0) || 0;
22  countNumber.textContent = String(count);
23  countNumber.classList.toggle('has-findings', count > 0);
24  countLabel.textContent = count === 1 ? 'anti-pattern' : 'anti-patterns';
25  overlaysVisible = state.overlaysVisible !== false;
26  btnToggle.textContent = overlaysVisible ? 'Hide overlays' : 'Show overlays';
27}
28
29async function loadState() {
30  const tabId = await getActiveTabId();
31  if (!tabId) return;
32  chrome.runtime.sendMessage({ action: 'get-state', tabId }, updateFromState);
33}
34
35// Listen for real-time updates from service worker
36chrome.runtime.onMessage.addListener((msg) => {
37  if (msg.action === 'findings-updated') {
38    const count = msg.findings?.reduce((sum, f) => sum + f.findings.length, 0) || 0;
39    countNumber.textContent = String(count);
40    countNumber.classList.toggle('has-findings', count > 0);
41    countLabel.textContent = count === 1 ? 'anti-pattern' : 'anti-patterns';
42    btnScan.textContent = 'Scan page';
43    btnScan.disabled = false;
44  }
45  if (msg.action === 'overlays-toggled-broadcast') {
46    overlaysVisible = msg.visible;
47    btnToggle.textContent = overlaysVisible ? 'Hide overlays' : 'Show overlays';
48  }
49});
50
51btnScan.addEventListener('click', async () => {
52  const tabId = await getActiveTabId();
53  if (!tabId) return;
54  btnScan.textContent = 'Scanning...';
55  btnScan.disabled = true;
56  chrome.runtime.sendMessage({ action: 'scan', tabId });
57});
58
59btnToggle.addEventListener('click', async () => {
60  const tabId = await getActiveTabId();
61  if (!tabId) return;
62  chrome.runtime.sendMessage({ action: 'toggle-overlays', tabId });
63  overlaysVisible = !overlaysVisible;
64  btnToggle.textContent = overlaysVisible ? 'Hide overlays' : 'Show overlays';
65});
66
67loadState();