---
name: extension.js
summary: "Extension.js is a zero-config build and dev tool for browser extensions, providing hot module replacement, cross-browser targeting (Chrome, Edge, Firefox), and production packaging via a single CLI. It supports vanilla JS, TypeScript, and frameworks like React, Vue, Svelte, and Preact without webpack or rollup configuration."
language: TypeScript
license: MIT
repo: https://github.com/extension-js/extension.js
source: https://opensources.dev/resource/extensionjs
health: 100
---

# extension.js

Extension.js is a zero-config build and dev tool for browser extensions, providing hot module replacement, cross-browser targeting (Chrome, Edge, Firefox), and production packaging via a single CLI. It supports vanilla JS, TypeScript, and frameworks like React, Vue, Svelte, and Preact without webpack or rollup configuration.

# Extension.js     

> Build extensions for Chrome, Edge, and Firefox. No build config required.

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

Works with `npm`, `pnpm`, `yarn`, and `bun`.

[Documentation](https://extension.js.org) · [Templates](https://templates.extension.dev) · [Examples](https://github.com/extension-js/examples) · [Discord](https://discord.gg/v9h2RgeTSN)

## 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](https://github.com/cezaraugusto/extension/assets/4672033/7263d368-99c4-434f-a60a-72c489672586)

Or skip the install and try a [live template](https://templates.extension.dev) in your browser.

## How is this different

If you have used [Plasmo](https://www.plasmo.com), [WXT](https://wxt.dev), or [CRXJS](https://crxjs.dev), here is what Extension.js does that the others do not:

CapabilityExtension.jsRun any GitHub sample directly`extension dev https://github.com/.../sample`Managed browser binaries`extension install firefox` downloads an isolated buildCross-browser HMR for content scriptsBuilt in, no plugin glueProduction zip for the stores`extension build --zip`Framework agnostic[Vanilla](https://templates.extension.dev/javascript), [TS](https://templates.extension.dev/typescript), [React](https://templates.extension.dev/react), [Vue](https://templates.extension.dev/vue), [Svelte](https://templates.extension.dev/svelte), [Preact](https://templates.extension.dev/preact), no lock-inCustom Chromium and Gecko binaries`--chromium-binary`, `--gecko-binary`

## Frameworks

ESNext[Try out](https://templates.extension.dev/javascript)TypeScript[Try out](https://templates.extension.dev/typescript)WASM[Try out](https://github.com/extension-js/examples/tree/main/examples/transformers-js)React[Try out](https://templates.extension.dev/react)Vue[Try out](https://templates.extension.dev/vue)Svelte[Try out](https://templates.extension.dev/svelte)Preact[Try out](https://templates.extension.dev/preact)

## 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>`

```bash
# 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✅ SupportedMicrosoft Edge✅ SupportedMozilla Firefox✅ SupportedApple Safari 🚙 NextChromium-based✅ SupportedGecko-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:

```bash
# 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:

```bash
# 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.

```bash
npm install extension@latest --save-dev
```

```json
{
  "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.](https://github.com/cezaraugusto/extension/assets/4672033/48694a23-b7f1-4098-9c5d-eff49983739c)

## Start from a Chrome sample

Pull any sample from [Chrome Extension Samples](https://github.com/GoogleChrome/chrome-extensions-samples) and run it directly:

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

[Watch demo](https://github.com/cezaraugusto/extension/assets/4672033/ee221a94-6ec7-4e04-8553-8812288927f1)

## Community

- Star the repo if Extension.js helped you ship faster
- Join the [Discord](https://discord.gg/v9h2RgeTSN) for help and feedback
- Open issues and feature requests on [GitHub](https://github.com/extension-js/extension.js/issues)
- Browse production-ready [examples](https://github.com/extension-js/examples)

## License

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