Demos
Browse CRXJS demo fixtures and contributor playgrounds for real browser extension examples.
The CRXJS examples live in the chrome-extension-tools repository. There are two useful collections:
- Demo fixtures cover tested extension patterns, framework integrations, HMR behavior, content scripts, extension pages, messaging, and web accessible resources.
- Contributor playgrounds are runnable projects for people working on CRXJS itself. They are useful when you want to try framework-specific changes against a real extension project.
Demo Fixtures
Start with these fixtures when you want to inspect a working implementation:
| Demo | What it shows |
|---|---|
| React content script | Inject a React app with a Manifest V3 content script. |
| React extension page | Build a React-powered extension page declared from the manifest. |
| React new tab | Replace the browser new tab page with a React app. |
| Vue page | Build an extension page with Vue. |
| Vue content script | Inject a Vue app from a content script. |
| Svelte page | Build an extension page with Svelte. |
| Svelte content script | Inject a Svelte app from a content script. |
| Dynamic content script | Register and hot-update dynamic content scripts. |
| Messaging with ESM | Use extension messaging with ESM output. |
| Web accessible resources | Let CRXJS generate manifest entries for imported public assets. |
Browse the full e2e fixture directory for more focused scenarios, including HMR, live reload, sandbox pages, iframe handling, CSS injection, and Manifest V3 edge cases.
Contributor Playgrounds
Playgrounds are maintained for contributors and plugin development. From the
chrome-extension-tools repo root, use the matching pnpm play:* script to run
one locally.
| Playground | Command |
|---|---|
| React | pnpm play:react |
| Solid | pnpm play:solid |
| Svelte | pnpm play:svelte |
| Vanilla JS | pnpm play:vanilla |
| Vue | pnpm play:vue |