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

create-a-new-extension.mp4

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

Get started from a sample

Get started

Start developing an extension using a sample from Chrome Extension Samples

See the example below where we request the sample page-redder from Google Chrome Extension Samples.

Watch demo

chrome-extension-sample-page-redder-on-edge.mp4

Try Yourself

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

usage-with-an-existing-extension.mp4

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

Browser testing via

License

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