Chrome extension (Manifest V3) for Commentarium — read and write comments on any URL via a sliding side panel that mounts on every page.
The extension is a UI shell: it embeds https://commentarium.app/comments?url=<current-page> in an iframe and decides when and where to show it. Authentication runs through a thin service-worker broker that vends Firebase ID tokens; the iframe handles /api/login itself, and the browser writes a Partitioned (CHIPS) session cookie. No chrome.cookies, no host permissions.
Chrome Web Store: chromewebstore.google.com/detail/hogjejflnephnomijedgfocipidnkemf
npm install
cp .env.example .env.local # fill in Firebase web SDK config + Web OAuth client_id
npm run dev # build to dist/ in watch mode + HMR reload server
# → Chrome → chrome://extensions → enable Developer mode → Load unpacked → select dist/npm run build:release produces the zip you upload to the Chrome Web Store (scrubs the dev key field via cross-env).
Three small custom surfaces; everything else is boilerplate.
| Surface | File | Role |
|---|---|---|
| Background SW | src/pages/background/ | Action-click + URL-change relay; auth broker (Firebase ID-token vending) |
| Content script | src/pages/content/ | Mounts the panel React root on every page; embeds the iframe |
| Manifest | manifest.ts | MV3 manifest, generated by a vite plugin from this file at build time |
Permissions: activeTab, identity, storage. No host permissions. Min Chrome 114 (CHIPS GA).
- docs/architecture.md — messaging, panel lifecycle, iframe wrapper
- docs/auth.md — auth broker contract: sender gating, op surface, Google sign-in flow, error codes, Cloud Console setup,
VITE_EXTENSION_KEYdual role - docs/development.md — build, load-unpacked, HMR caveats, release build, tests
- Background reading:
- From chrome.cookies to CHIPS — why the SW vends ID tokens instead of writing cookies itself
- From getAuthToken to launchWebAuthFlow — why the Google sign-in flow uses
launchWebAuthFlow
Built on chrome-extension-boilerplate-react-vite.
MIT