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!
create-a-new-extension.mp4
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
chrome-extension-sample-page-redder-on-edge.mp4
π₯ Use Edge to start developing an extension from Chrome Extension Samples
See the example below where we request the sample magic8ball from from Google Chrome Extension Samples with Edge as the runtime browser.
npx extension dev https://github.com/GoogleChrome/chrome-extensions-samples/tree/main/api-samples/topSites/magic8ball --browser=edge
chrome-extension-sample-magic8ball-on-edge.mp4
π₯π₯ Use Edge to start developing a Mozilla Add-On from MDN WebExtensions Examples
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
mdn-webextensions-examples-apply-css-on-edge.mp4
π₯π₯π₯ Use Chrome and Firefox to start developing a Mozilla Add-On from MDN WebExtensions Examples
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
mdn-webextensions-examples-firefox-code-search-on-chrome-and-firefox.mp4
usage-with-an-existing-extension.mp4
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
![Extension.js with all the browser runners open](https://private-user-images.githubusercontent.com/4672033/332254790-f0f5bbfc-e873-4856-9fdd-db2b42d9ab96.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MjU1NTEzNjksIm5iZiI6MTcyNTU1MTA2OSwicGF0aCI6Ii80NjcyMDMzLzMzMjI1NDc5MC1mMGY1YmJmYy1lODczLTQ4NTYtOWZkZC1kYjJiNDJkOWFiOTYucG5nP1gtQW16LUFsZ29yaXRobT1BV1M0LUhNQUMtU0hBMjU2JlgtQW16LUNyZWRlbnRpYWw9QUtJQVZDT0RZTFNBNTNQUUs0WkElMkYyMDI0MDkwNSUyRnVzLWVhc3QtMSUyRnMzJTJGYXdzNF9yZXF1ZXN0JlgtQW16LURhdGU9MjAyNDA5MDVUMTU0NDI5WiZYLUFtei1FeHBpcmVzPTMwMCZYLUFtei1TaWduYXR1cmU9M2MzODczODI0ODkxYWY0ZGViNTgwODAwODA1NDNiZGQ0NGU0OGIzNWM4Njc1ZjA3MGFjMDNmYjU2ZWRkOTZkMSZYLUFtei1TaWduZWRIZWFkZXJzPWhvc3QmYWN0b3JfaWQ9MCZrZXlfaWQ9MCZyZXBvX2lkPTAifQ.paGhbisgKfPg0FAFZMquTKO-Dd1IwsXGoBt0DBgHAzY)
MIT (c) Cezar Augusto.