apps/extension · Manifest V3 · esbuild

Extension

Two very different places: the side panel, a page of the extension's own, and the overlays it draws on the pages it audits, where nothing may leak.

What it imports

In apps/extension/src/sidepanel/sidepanel.css, in this order. A test in the package holds the order for the two SvelteKit apps.

@import '@rgaa-dev/design/fonts.css';
@import '@rgaa-dev/design/tokens.css';
@import '@rgaa-dev/design/base.css';

The side panel

esbuild bundles the stylesheet with the package's fonts, tokens and base layer; the two families ship in the extension as woff2 (about 80 KB). The theme script is built to a file, theme-boot.js, and loaded before the stylesheets, because Manifest V3 refuses an inline script. Auto by default, the choice under the shared key, the old key migrated on first read.

The panel is being moved to Svelte 5, wizard by wizard; the components follow that migration. Until then it renders HTML strings, and every hex literal it still writes is listed with its reason in an allow-list that a test only lets shrink.

The overlays on audited pages

What the extension injects into another site's page must not restyle that page and must not be restyled by it. The tokens are defined a second time, generated on .rl-scope instead of the root, in tokens.scoped.css; every host element the extension adds carries that class and the panel's resolved theme in data-theme, and never reads the host page's theme. The icons are the same drawings written as a string by svgIcon(), since the overlays build markup as text.

Two hundred and sixteen pixels

Firefox lets the sidebar go down to 216 pixels wide, Chrome's side panel to about 320. Every story on this site is shown at 320 and at 216 pixels next to its full width, each in a scroll region so that what overflows is seen and reachable; the reflow rule of the layout foundation says what happens below.

Components in use

31 of 86, as each doc declares under surfaces.