Plug-and-play, zero-config, cross-browser extension development tool.

Create cross-browser extensions with no build configuration.

• Create A New Extension — How to create a new extension.
• Get Started Immediately — Get work done in no time.
• I have An Extension - Use only specific parts of Extension.js.

Extension.js is a plug-and-play, zero-config, cross-browser extension development tool with built-in support for TypeScript, WebAssembly, and modern JavaScript.

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

A new browser instance will open up with your extension ready for development.

You are done. Time to hack on your extension!

https://github.com/cezaraugusto/extension/assets/4672033/7263d368-99c4-434f-a60a-72c489672586

For a preview of extensions running these technologies, see documentation about Templates.

ESNext ✅	TypeScript ✅	WASM ✅	React ✅	Vue ✅	Angular 👋	Svelte 👋	Solid 👋	Preact 👋

👋 = PR Welcome!

Dive right into development by starting with a sample from the Chrome Extension Samples repository. It's a great way to get acquainted with best practices and save time:

1. Open your terminal.
2. Navigate to the directory where you want your project.
3. Run the command:

   npx extension dev <sample-name>

   Replace <sample-name> with the name of the sample you wish to use from Chrome Extension Samples.

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

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

https://github.com/cezaraugusto/extension/assets/4672033/ee221a94-6ec7-4e04-8553-8812288927f1

Extension.js supports a variety of browsers, including Microsoft Edge. To start an Edge-compatible extension, simply:

1. Open your terminal.
2. Navigate to your desired project directory.
3. Execute:

   npx extension dev  <sample-name> --browser=edge

   Tailor your command by replacing <sample-name> with the specific sample you're interested in.

See the example below where we request the sample magic8ball from from Google Chrome Extension Samples using Edge as the runtime browser.

npx extension dev https://github.com/GoogleChrome/chrome-extensions-samples/tree/main/api-samples/topSites/magic8ball --browser=edge

https://github.com/cezaraugusto/extension/assets/4672033/2db2a1f6-3110-4380-9a49-dc9d034146aa

Bridge the gap between Firefox and Edge by running Mozilla Add-Ons using Edge:

1. Navigate to your project directory.
2. Use the command:

   npx extension dev <addon-name> --browser=edge --polyfill=true

   This will fetch a Mozilla Add-On and adapt it for Edge.

See the example below where we request the sample Apply CSS from MDN WebExtensions Examples using Edge as the runtime browser.

npx extension dev https://github.com/mdn/webextensions-examples/tree/main/apply-css --browser=edge --polyfill=true

https://github.com/cezaraugusto/extension/assets/4672033/130cb430-1567-419c-8c90-23fddcf20f00

Need to run Firefox and Chrome at once? Sem problemas.

1. Navigate to your project directory.
2. Use the command:

   # Ensure you either have a polyfill installed or --polyfill is set.
   npx extension dev <addon-name> --browser=chrome,firefox --polyfill=true

   This will fetch a Mozilla Add-On and adapt it for Chrome, or vice-versa.

See the example below where we request the sample firefox-code-search from MDN WebExtensions Examples using Chrome and Firefox as the runtime browsers.

npx extension dev https://github.com/mdn/webextensions-examples/tree/main/firefox-code-search --browser=chrome,firefox --polyfill=true

https://github.com/cezaraugusto/extension.js/assets/4672033/ac94b608-c936-40df-bce7-63ffd7fe31c5

https://github.com/cezaraugusto/extension/assets/4672033/48694a23-b7f1-4098-9c5d-eff49983739c

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 the demo above or follow these instructions to get it done:

Step 1 - Install extension as a devDependency

npm install extension --save-dev

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

{
  scripts: {
    build: 'extension build',
    dev: 'extension dev',
    start: 'extension start'
  },
  devDependencies: {
    // ...other dependencies
    extension: 'latest'
  }
}

Done. You are all set!

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

Arc ☑️	Brave ☑️	Chrome ✅	Chromium ☑️	Edge ✅	Firefox ✅	Opera ☑️	Safari ⛔️	Vivaldi ☑️

☑️ = It is theoretically possible to load all Chromium forks given the current support for Chrome. There is a request ticket for supporting all Chromium-based browsers. Most requested features are added first, so thumbs up it to speed-up the development process.

Firefox (Android) ⛔️	Safari (iOS) ⛔️

If you want to target a specific browser, just pass the --browser flag to the dev/start command (based on the list available above), like npx extension dev path/to/extension --browser=edge.

Hint Pass --browser="all" to load all available browsers at once.

extension dev --browser=all

MIT (c) Cezar Augusto.