skills/pbakaus_impeccable
1
0
Fork 0
mirror of https://github.com/pbakaus/impeccable.git synced 2026-09-22 02:56:52 +03:00
Code Issues Packages Projects Releases Wiki Activity

Polish Chrome extension for Web Store submission

Browse Source 
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>
This commit is contained in:
Paul Bakaus
2026-04-06 21:06:09 -07:00
co-authored by Claude Opus 4.6
parent e961d56252
commit 13b2f763d9
16 changed files with 1465 additions and 178 deletions
Download Patch File Download Diff File Expand all files Collapse all files
extension/devtools/devtools.js
+34 -5
View File
@@ -12,10 +12,39 @@ chrome.devtools.panels.create(
'devtools/panel.html'
);
// Connect a lifecycle port so the service worker knows when DevTools closes
const port = chrome.runtime.connect({
name: `impeccable-devtools-${chrome.devtools.inspectedWindow.tabId}`,
// 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');
});
// Auto-scan when DevTools opens (regardless of which panel is active).
port.postMessage({ action: 'scan' });
// 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);