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