Laptop / split-screen-first SEO overlay. Minimal audit scope on purpose — the differentiator is the display mechanism, not audit depth.
content_scripts[].cssis intentionally[]. Zero global stylesheets are injected into host pages.- All overlay CSS lives in a
<style>tag insidehost.attachShadow({mode:"open"})at runtime (content.js:CSSconst). The host element itself getsall: initial !important+ fixed zero-size positioning, and the visible panel/badge use classes prefixedav-that only exist inside the shadow tree. - Result: host-page resets (Tailwind preflight,
* { margin: 0 }, Bootstrap,overflow: hiddencontainment on body) cannot restyle the panel, and the panel cannot restyle the host page. Verified by checking computed styles of host-page nodes before/after injection — no deltas.
- Panel is
position: fixedinside the shadow root; header (data-drag) moves it, corner grip (data-resize) resizes it (min 240×200). - Snap-to-edge: within 24px of a viewport edge the panel snaps flush so it can never be dragged fully off-screen (the core Keyword-Surfer complaint).
- Persist: debounced 250ms writes to
chrome.storage.local.overlaySettings = { mode, positions, collapsedByDefault }.mode: "per-site"keys positions bylocation.hostname;"global"uses one shared slot. Switching modes in the overlay settings re-seeds/re-clamps immediately;chrome.storage.onChangedsyncs open tabs. - Hide temporarily:
Hidebutton orAlt+Shift+A; a smallShow SEOrestore tab stays docked at the right edge.Esccollapses to badge.
- Below ~500px viewport width the overlay auto-compacts to a draggable
SEO + pass/warn/fail dotpill (autoCompact); full panel returns when the window widens, unless the user explicitly collapsed. - Manual collapse (
–button) and badge click expand/collapse without losing position — badge is anchored to the same persisted{x, y}. - Scoring:
fail= missing title / zero H1 / alt < 50%;warn= title not 30–60 chars, meta missing/outside 120–160, H1 > 1, alt < 90%, words < 300; elsepass.
- Host + panel + badge use
z-index: 2147483647(max safe int) so the overlay paints above cookie banners, sticky headers, chat widgets. position: fixedinside a shadow root attached to<html>(not a nested container) avoids clipping by ancestoroverflow: hidden/ CSS containment. Edge case: pages that applytransform/filterto<html>breakfixedpositioning per spec — the 2s bounds-guard + resize re-validation re-clamps into view, and Hide hotkey is the escape hatch.- On
resize,visualViewport.resize, window-move poll (screenX/screenY), and storage change,revalidate()clamps{x,y,width,height}into the live viewport. Never off-screen down to 400px (below 500px = badge by design).
Title (+length) · meta description (+length) · H1 count · word count ·
image alt-coverage % (withAlt/total) · PASS/WARN/FAIL status line.
Re-runs on load, +1.5s, SPA navigations, and debounced DOM mutations.
- Panel forces
direction: ltr+unicode-bidi: isolateon its own root so RTL host pages don't mirror the overlay controls; audited page content (Tamil titles/metas, e.g. Kalki Online) is displayed as-is withoverflow-wrap: anywhereand counted with Unicode-aware[...str].length. - QA: open a Tamil article page, drag/resize/compact the panel, confirm Tamil title/meta glyphs render unclipped and counts look sane.
chrome://extensions→ enable Developer mode → Load unpacked → select thisanchor-view/folder.- Open any site; panel appears top-right-ish (persisted spot thereafter).
- Drag header / resize grip / collapse /
Alt+Shift+Ato exercise states.