Extension.js

The cross-browser extension framework

• Create a new extension — How to create a new extension.
• Watch demo — See how creating a new extension works.
• Start from an example — Start from a working baseline.
• I have an extension — Use only specific parts of Extension.js.

Create cross-browser extensions without manual build configuration.
Use Extension.js to develop, build, and preview across browsers with a unified workflow.

Create a new extension

Use the create command to generate a new extension. Also works with pnpm, yarn, and bun.

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

Watch demo

Watch demo

Web standards and framework support

ESNext Try out	TypeScript Try out	WASM (soon)	React Try out	Vue Try out	Svelte Try out	Preact Try out

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

I have an extension

If you have an existing extension which is using a package manager, you can install the Extension.js package and manually create the scripts used to run your extension.

See how it works

See how it works

Step 1 - Install extension as a devDependency

npm install extension@latest --save-dev

Step 2 - Link your npm scripts with the executable Extension.js commands

{
  "scripts": {
    "build": "extension build",
    "dev": "extension dev",
    "preview": "extension preview"
  },
  "devDependencies": {
    // ...other dependencies
    "extension": "latest"
  }
}

Done. You are all set!

• To develop the extension, run npm run dev.
• To build the extension in production mode, run npm run build.
• To visualize the extension in production mode, run npm run build and npm run preview.

Using a specific browser for development

Chrome browser ✅	Edge browser ✅	Firefox browser ✅	Safari browser (soon)	Chromium-based ✅	Gecko-based ✅

Browser flags and custom binaries

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>

Examples:

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

Managed browser binaries

Use Extension.js commands to install/remove managed browser binaries:

# Install into Extension.js managed cache
npx extension@latest install --browser=chromium
npx extension@latest install --browser=firefox
Show managed cache root
npx extension@latest install --where
Show managed path for a specific browser
npx extension@latest install --where --browser=firefox
Remove one browser binary
npx extension@latest uninstall chromium
Remove all managed browser binaries
npx extension@latest uninstall --all
Show managed cache root
npx extension@latest uninstall --where
Show managed path(s) for target browser(s)
npx extension@latest uninstall --where --browser=chromium

uninstall only removes binaries from the Extension.js managed cache root (or EXT_BROWSERS_CACHE_DIR when set). It does not remove browser installations that were installed elsewhere (for example, system browsers or custom paths outside the managed cache).

edge note for Linux: Playwright channel installs may require a privileged interactive session (sudo prompt). If channel install cannot proceed but a system Edge binary is already present, Extension.js will use that existing binary. Otherwise, install Edge system-wide first and then run Extension.js with --browser=edge (or use chromium).

Default managed cache locations are stable and human-readable:

• macOS: ~/Library/Caches/extension.js/browsers
• Linux: ~/.cache/extension.js/browsers (or $XDG_CACHE_HOME/extension.js/browsers)
• Windows: %LOCALAPPDATA%\\extension.js\\browsers

If you want a custom path, set EXT_BROWSERS_CACHE_DIR to a clean location (for example, EXT_BROWSERS_CACHE_DIR=/tmp/extension.js/browsers-dev).

Sponsors

License

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