Render the autofill card in a closed Shadow DOM
...
The card used to be injected straight into the page: host-page CSS could
restyle it (or hide/mimic it), page JS could read the card's DOM — leaking
secret titles — and reach its buttons via querySelector on our class names.
Now it lives in a closed shadow root on a bare sized-to-zero host element:
- CSS does not cross the shadow boundary in either direction, so page styles
can no longer repaint the card;
- the page cannot traverse into a closed root (host.shadowRoot is null), so
secret titles and buttons are unreachable from the main world;
- src/content.css is no longer injected into page stylesheets — it is now a
web-accessible resource, fetched once per page and injected as a <style>
inside the shadow root (with a graceful no-styles fallback).
- while restyling the card, bring it onto the gnexus-ui-kit 1.0 palette
(panel #16161e, left accent border, uppercase IBM Plex Mono titles) to
match the rebuilt popup.
Verified end-to-end in real Chromium: isolation probe reports a bare empty
host, null shadowRoot, no card nodes or CSS rules reachable from the page,
no title leak under deliberately hostile page CSS (color:red !important over
all divs); clicking Use fills the form and removes the card.
Co-Authored-By: Claude Code <noreply@anthropic.com>
Eugene Sukhodolskiy
committed
5 hours ago
