Extension.js

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

• 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!

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

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

👋 = PR Welcome!

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

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

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

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

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.