mirror of
https://github.com/pbakaus/impeccable.git
synced 2026-09-12 22:26:38 +03:00
Paul BakausandClaude Opus 4.6
13b2f763d9
Refactors the extension for on-demand injection (no static content_scripts entry — content script and detector are loaded only when the user actively opens the Impeccable panel, sidebar pane, or popup). Adds a new "Auto-scan" preference (default: scan when the Impeccable panel opens, opt-in: scan when DevTools opens) plus configurable line length (strict/lax) and highlight blur on/off settings. Adds an Elements panel sidebar that shows findings for the currently selected element. Includes substantial overlay UX work: page-pixel-perfect spotlight mask via clip-path, refined hover/dim states, instant transitions for snappier feel, copy buttons for findings, hover-from-panel highlighting, and a brand-aware exception list so the font check no longer flags Roboto on Google's own properties. Robustness fixes for the MV3 service worker lifecycle: heartbeat keepalive plus auto-reconnecting ports across panel/sidebar/devtools so transient SW restarts don't break the panel UI, and immediate teardown on DevTools close (replacing an unreliable setTimeout-based defer that didn't survive SW termination). Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
51 lines
1.8 KiB
JavaScript
51 lines
1.8 KiB
JavaScript
/**
|
|
* Impeccable DevTools Extension - DevTools Page
|
|
*
|
|
* Creates the Impeccable panel and triggers an auto-scan when DevTools opens.
|
|
* This page lives for the entire DevTools session -- its port disconnect
|
|
* is the canonical signal that DevTools has closed.
|
|
*/
|
|
|
|
chrome.devtools.panels.create(
|
|
'Impeccable',
|
|
'icons/icon-32.png',
|
|
'devtools/panel.html'
|
|
);
|
|
|
|
// Sidebar pane in the Elements panel: shows findings for the currently selected element
|
|
chrome.devtools.panels.elements.createSidebarPane('Impeccable', (sidebar) => {
|
|
sidebar.setPage('devtools/sidebar.html');
|
|
sidebar.setHeight('200px');
|
|
});
|
|
|
|
// Lifecycle port to the service worker. Auto-reconnects if the SW gets terminated
|
|
// (which can happen in MV3 after ~30s of inactivity, especially when the browser is unfocused).
|
|
const portName = `impeccable-devtools-${chrome.devtools.inspectedWindow.tabId}`;
|
|
let lifecyclePort = null;
|
|
let firstConnect = true;
|
|
function connectLifecycle() {
|
|
lifecyclePort = chrome.runtime.connect({ name: portName });
|
|
// On the very first connection, decide whether to auto-scan based on the user's setting.
|
|
// Default ('panel'): wait until the user opens the Impeccable panel or sidebar.
|
|
// Opt-in ('devtools'): scan immediately when DevTools opens.
|
|
if (firstConnect) {
|
|
firstConnect = false;
|
|
chrome.storage.sync.get({ autoScan: 'panel' }, (settings) => {
|
|
if (settings.autoScan === 'devtools') {
|
|
try { lifecyclePort?.postMessage({ action: 'scan' }); } catch {}
|
|
}
|
|
});
|
|
}
|
|
lifecyclePort.onDisconnect.addListener(() => {
|
|
lifecyclePort = null;
|
|
// Reconnect on the next tick so the SW sees a fresh connection
|
|
setTimeout(connectLifecycle, 100);
|
|
});
|
|
}
|
|
connectLifecycle();
|
|
|
|
// Heartbeat to keep the SW alive
|
|
setInterval(() => {
|
|
try { lifecyclePort?.postMessage({ action: 'ping' }); } catch {}
|
|
}, 20000);
|