Extension.js

The cross-browser extension framework. Build for Chrome, Edge, and Firefox with no build config required.

npx extension@latest create my-extension
cd my-extension
npm run dev

Works with npm, pnpm, yarn, and bun.

Documentation · Templates · Examples · Discord

Why Extension.js

Browser extensions ship with the worst dev experience in modern web. Manifest V3 fragmentation, browser-specific quirks, no hot reload for content scripts, and a separate build pipeline for every target. Extension.js fixes that.

• Hot Module Replacement for background, content, popup, and options scripts, including React, Vue, Svelte, and Preact components
• Manifest V3 by default, with automatic adapters for Chrome, Edge, and Firefox targets
• One CLI for Chrome, Edge, Firefox, and any Chromium or Gecko binary
• Zero config, no webpack, no rollup, no plugins to maintain
• First-class TypeScript, React, Vue, Svelte, and Preact support
• Production builds with extension build --zip, ready for the Chrome Web Store and Firefox Add-ons
• Drop-in for existing extensions with one devDependency

Watch it work

60-second demo

Or skip the install and try a live template in your browser.

How is this different

If you have used Plasmo, WXT, or CRXJS, here is what Extension.js does that the others do not:

| Capability | Extension.js | | :--------- | :----------- | | Run any GitHub sample directly | extension dev https://github.com/.../sample | | Managed browser binaries | extension install firefox downloads an isolated build | | Cross-browser HMR for content scripts | Built in, no plugin glue | | Production zip for the stores | extension build --zip | | Framework agnostic | Vanilla, TS, React, Vue, Svelte, Preact, no lock-in | | Custom Chromium and Gecko binaries | --chromium-binary, --gecko-binary |

Frameworks

| | | | | | | | | :-: | :-: | :-: | :-: | :-: | :-: | :-: | | ESNextTry out | TypeScriptTry out | WASMTry out | ReactTry out | VueTry out | SvelteTry out | PreactTry out |

Browsers

Use these flags with extension dev, extension start, or extension preview:

• Select a browser: --browser <chrome | edge | firefox>
• Custom Chromium binary: --chromium-binary <path-to-binary>
• Custom Gecko (Firefox) binary: --gecko-binary <path-to-binary>

# Chrome (system default)
npx extension@latest dev --browser=chrome

# Edge
npx extension@latest dev --browser=edge

# Custom Chrome/Chromium path
npx extension@latest dev --chromium-binary "/Applications/Google Chrome.app/Contents/MacOS/Google Chrome"

# Custom Firefox path
npx extension@latest dev --gecko-binary "/Applications/Firefox.app/Contents/MacOS/firefox"

| | | | | | | | :-: | :-: | :-: | :-: | :-: | :-: | | Google Chrome✅ Supported | Microsoft Edge✅ Supported | Mozilla Firefox✅ Supported | Apple Safari 🚙 Next | Chromium-based✅ Supported | Gecko-based✅ Supported |

Ship to the store

Build a production-ready bundle and zip it for submission to the Chrome Web Store, Edge Add-ons, or Firefox AMO:

# Production build
npx extension@latest build

# Production build packaged as a ZIP
npx extension@latest build --zip

# Per-browser builds
npx extension@latest build --browser=firefox --zip

Useful flags:

• --zip packages the build into a ZIP ready for store upload
• --zip-source includes source files for store source-code review
• --zip-filename <name> controls the output filename
• --polyfill enables the cross-browser webextension polyfill

Manage browser binaries

Skip the system-install dance. Extension.js can download and manage isolated browser binaries for clean dev sessions:

# Install a managed Firefox build
npx extension@latest install firefox

# Install Chrome and Edge in one go
npx extension@latest install --browser=all

# Print where managed browsers live
npx extension@latest install --where

Add to an existing extension

Install Extension.js as a dev dependency and wire up your scripts.

npm install extension@latest --save-dev

{
  "scripts": {
    "build": "extension build",
    "dev": "extension dev",
    "preview": "extension preview"
  }
}

Run npm run dev to develop, npm run build for production, and npm run preview to inspect the production output. See it in action.

Start from a Chrome sample

Pull any sample from Chrome Extension Samples and run it directly:

npx extension@latest dev https://github.com/GoogleChrome/chrome-extensions-samples/tree/main/functional-samples/sample.page-redder --browser=edge

Watch demo

Community

• Star the repo if Extension.js helped you ship faster
• Join the Discord for help and feedback
• Open issues and feature requests on GitHub
• Browse production-ready examples

License

MIT (c) Cezar Augusto and the Extension.js authors.