Component Picker
A Chrome and Firefox extension that turns any element on any site into a bundle an AI can rebuild pixel-perfect — HTML, browser-resolved CSS, forced interaction states, theme pairs and responsive diffs, on one click.
- Built a 47-file, ~5k-line extraction engine that diffs `getComputedStyle` against a neutral `<div>` baseline for box properties and against the *parent* for inherited ones — so the CSS in a bundle is what an author would have written, not a 300-property dump of browser defaults.
- Drove one shared `chrome.debugger` CDP session per capture — `CSS.forcePseudoState` for hover/focus/active, `Emulation.setDeviceMetricsOverride` for mobile 390×844 and tablet 768×1024, media emulation for the other colour scheme and for print / reduced-motion / forced-colors, and `Page.captureScreenshot` per viewport — all inside a single attach, because attaching once per section would flash Chrome's debugger bar five times and re-fire the page's resize handlers between each.
- Resolved every `var(--…)` back to its token name alongside the real computed value, so a bundle carries both the portable truth (`var(--gray-a3)`) and the pixel truth (`rgba(176, 199, 217, 0.145)`) — the half that maps onto the target project's own design system, and the half that proves it.