Make it very easy to develop cross-browser extensions.
Create cross-browser extensions with no build configuration.
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!
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
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!
npm run dev
.npm run start
.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.