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

Web standards and framework support

<div align="center">

| <img src="https://github.com/cezaraugusto/extension.js/assets/4672033/a9e2541a-96f0-4caa-9fc9-5fc5c3e901c8" width="70"> | <img src="https://github.com/cezaraugusto/extension.js/assets/4672033/b42c5330-9e2a-4045-99c3-1f7d264dfaf4" width="70"> | <img src="https://github.com/cezaraugusto/extension.js/assets/4672033/f19edff3-9005-4f50-b05c-fba615896a7f" width="70"> | <img src="https://github.com/cezaraugusto/extension.js/assets/4672033/ff64721d-d145-4213-930d-e70193f8d57e" width="70"> | <img src="https://github.com/cezaraugusto/extension.js/assets/4672033/15f1314a-aa65-4ce2-a3f3-cf53c4f730cf" width="70"> | <img src="https://github.com/cezaraugusto/extension.js/assets/4672033/de1082fd-7cf6-4202-8c12-a5c3cd3e5b42" width="70"> | <img src="https://github.com/cezaraugusto/extension.js/assets/4672033/8807efd9-93e5-4db5-a1d2-9ac524f7ecc2" width="70"> | | :---------------------------------------------------------------------------------------------------------------------: | :---------------------------------------------------------------------------------------------------------------------: | :---------------------------------------------------------------------------------------------------------------------: | :---------------------------------------------------------------------------------------------------------------------: | :---------------------------------------------------------------------------------------------------------------------: | :---------------------------------------------------------------------------------------------------------------------: | :---------------------------------------------------------------------------------------------------------------------: | | ESNext Try out | TypeScript Try out | WASM (soon) | React Try out | Vue Try out | Svelte Try out | Preact Try out |

</div> <details> <summary>Get started from a sample</summary>

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

Try Yourself

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

</details>

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

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

| <img src="https://media.extension.land/logos/browsers/chrome.svg" width="70"> | <img src="https://media.extension.land/logos/browsers/edge.svg" width="70"> | <img src="https://media.extension.land/logos/browsers/firefox.svg" width="70"> | <img src="https://media.extension.land/logos/browsers/safari.svg" width="70"> | <img src="https://media.extension.land/logos/browsers/chromium.svg" width="70"> | <img src="https://media.extension.land/logos/browsers/firefox.svg" width="70"> | | :---------------------------------------------------------------------------: | :-------------------------------------------------------------------------: | :----------------------------------------------------------------------------: | :---------------------------------------------------------------------------: | :-----------------------------------------------------------------------------: | :----------------------------------------------------------------------------: | | 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"

License

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

Extension.js

Install / Use

README

Extension.js

Create a new extension

Watch demo

Web standards and framework support

Get started

Watch demo

Try Yourself

I have an extension

See how it works

Using a specific browser for development

Browser flags and custom binaries

Sponsors

License