🧩 Create cross-browser extensions with no build configuration.
Plug-and-play, zero-config, cross-browser extension development tool.
Create cross-browser extensions with no build configuration.
extension
.extension
is a plug-and-play, zero-config, cross-browser extension development tool with built-in support for TypeScript, WebAssembly, React, 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
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:
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
Microsoft Edge
to kickstart any sample from chrome-extesions-sampleextension
supports a variety of browsers, including Microsoft Edge. To start an Edge-compatible extension, simply:
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:
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
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
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
commands
{
"scripts": {
"build": "extension build",
"dev": "extension dev",
"start": "extension start"
},
"devDependencies": {
// ...other deps,s
"extension": "latest"
}
}
Done. You are all set!
npm run dev
.npm run start
.npm run build
.☑️ = Likely works but no browser runner support yet.
Brave Browser | Google Chrome | Microsoft Edge | Mozilla Firefox | Opera Browser | Apple Safari | Vivaldi Browser |
☑️ | ✅ | ✅ | ⛔️ | ☑️ | ⛔️ | ☑️ |
Firefox For Android | Safari On 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.