Extension Build Pipeline

Plain files don't scale to TypeScript, React, and npm packages. See how Vite + CRXJS turns source into a loadable dist/ — and how a saved edit hot-reloads.

1 · source → build → dist

src/ (you write)

popup.tsx

background.ts

content.ts

manifest.ts

styles.css

→

Vite + CRXJS

⚙️
transpile · bundle
split · emit manifest

→

dist/ (you load)

popup.html + .js

service-worker.js

content.js

manifest.json

assets/*

2 · Why a build step?

Plain files

No TypeScript or JSX
No npm packages / imports
Manual reload on every change
No minification or tree-shaking
Hand-maintained manifest paths

Vite + CRXJS + TS

TypeScript + React out of the box
Import any npm package (bundled, CSP-safe)
HMR for popup/options, auto-reload for content
Minified, tree-shaken production build
Manifest generated from a typed config