Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/extension-js/extension.js
🧩 Plug-and-play, zero-config, cross-browser extension development tool.
https://github.com/extension-js/extension.js
boilerplate browser browser-extension browser-extensions chrome chromium cli edge extension extensions firefox generator kit runner safari starter-kit template webextension webextensions
Last synced: 7 days ago
JSON representation
🧩 Plug-and-play, zero-config, cross-browser extension development tool.
- Host: GitHub
- URL: https://github.com/extension-js/extension.js
- Owner: extension-js
- License: mit
- Created: 2020-10-22T23:48:23.000Z (over 3 years ago)
- Default Branch: main
- Last Pushed: 2024-06-18T20:03:37.000Z (9 days ago)
- Last Synced: 2024-06-19T00:17:51.867Z (9 days ago)
- Topics: boilerplate, browser, browser-extension, browser-extensions, chrome, chromium, cli, edge, extension, extensions, firefox, generator, kit, runner, safari, starter-kit, template, webextension, webextensions
- Language: TypeScript
- Homepage: https://extension.js.org
- Size: 4.2 MB
- Stars: 3,406
- Watchers: 18
- Forks: 79
- Open Issues: 23
-
Metadata Files:
- Readme: README.md
- Contributing: CONTRIBUTING.md
- Funding: .github/FUNDING.yml
- License: LICENSE
Lists
- awesome-stars - extension.js - and-play, zero-config, cross-browser extension development tool. | extension-js | 3435 | (TypeScript)
- my-awesome-stars - extension-js/extension.js - 🧩 Plug-and-play, zero-config, cross-browser extension development tool. (TypeScript)
- awesome-stars - extension-js/extension.js - 🧩 Plug-and-play, zero-config, cross-browser extension development tool. (TypeScript)
- my-awesome-list - extension.js - and-play, zero-config, cross-browser extension development tool. | extension-js | 3426 | (TypeScript)
- my-awesome-stars - extension-js/extension.js - 🧩 Plug-and-play, zero-config, cross-browser extension development tool. (TypeScript)
- awesome-stars - extension-js/extension.js - 🧩 Plug-and-play, zero-config, cross-browser extension development tool. (webextension)
- awesome-stars - extension.js - and-play, zero-config, cross-browser extension development tool. | extension-js | 3428 | (TypeScript)
- awesome-stars - extension-js/extension.js - and-play, zero-config, cross-browser extension development tool. | (TypeScript)
- awesome-github-repos - extension-js/extension.js - 🧩 Plug-and-play, zero-config, cross-browser extension development tool. (TypeScript)
- my-awesome-starred - extension-js/extension.js - 🧩 Plug-and-play, zero-config, cross-browser extension development tool. (TypeScript)
- my-awesome-stars - extension-js/extension.js - 🧩 Plug-and-play, zero-config, cross-browser extension development tool. (TypeScript)
- awesome-stars - extension-js/extension.js - 🧩 Plug-and-play, zero-config, cross-browser extension development tool. (TypeScript)
- awesome - extension-js/extension.js - 🧩 Plug-and-play, zero-config, cross-browser extension development tool. (TypeScript)
README
[action-image]: https://github.com/cezaraugusto/extension/actions/workflows/ci.yml/badge.svg?branch=main
[action-url]: https://github.com/cezaraugusto/extension/actions
[npm-image]: https://img.shields.io/npm/v/extension.svg
[npm-url]: https://npmjs.org/package/extension
[downloads-image]: https://img.shields.io/npm/dm/extension.svg
[downloads-url]: https://npmjs.org/package/extension
[node]: https://img.shields.io/node/v/extension.svg
[node-url]: https://nodejs.org
[prs]: https://img.shields.io/badge/PRs-welcome-brightgreen.svg
[prs-url]: https://github.com/cezaraugusto/extension/blob/main/CONTRIBUTING.md
[vunlerabilities]: https://snyk.io/test/github/cezaraugusto/extension/badge.svg
[fossa-image]: https://app.fossa.com/api/projects/git%2Bgithub.com%2Fcezaraugusto%2Fextension.svg?type=shield&issueType=license
[fossa-url]: https://app.fossa.com/projects/git%2Bgithub.com%2Fcezaraugusto%2Fextension?ref=badge_shield&issueType=license
# Extension.js [![npm][npm-image]][npm-url] [![fossa][fossa-image]][fossa-url] [![workflow][action-image]][action-url] [![downloads][downloads-image]][downloads-url] [![PR's welcome][prs]][prs-url]
> Make it very easy to develop cross-browser extensions.
> Create cross-browser extensions with no build configuration.
- [Create A New Extension](#create-a-new-extension) — How to create a new extension.
- [Get Started Immediately](#get-started-immediately) — Get work done in no time.
- [I have An Extension](#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.
## Create A New Extension
```bash
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
## Web Standards and Modern JavaScript Support
For a preview of extensions running these technologies, see documentation about [Templates](https://extension.js.org/n/getting-started/templates/).
| 
| 
| 
| 
| 
| 
| 
| 
| 
|
| :---------------------------------------------------------------------------------------------------------------------: | :---------------------------------------------------------------------------------------------------------------------: | :---------------------------------------------------------------------------------------------------------------------: | :---------------------------------------------------------------------------------------------------------------------: | :---------------------------------------------------------------------------------------------------------------------: | :---------------------------------------------------------------------------------------------------------------------: | :---------------------------------------------------------------------------------------------------------------------: | :---------------------------------------------------------------------------------------------------------------------: | :---------------------------------------------------------------------------------------------------------------------: |
| ESNext
✅ | TypeScript
✅ | WASM
✅ | React
✅ | Vue
✅ | Angular
👋 | Svelte
👋 | Solid
👋 | Preact
👋 |
👋 = PR Welcome!
## Get Started Immediately
### Use Chrome to start developing an extension from Chrome Extension Samples
> See the example below where we request the sample [page-redder](https://github.com/GoogleChrome/chrome-extensions-samples/tree/main/functional-samples/sample.page-redder) from [Google Chrome Extension Samples](https://github.com/GoogleChrome/chrome-extensions-samples).
```bash
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
🔥 Use Edge to start developing an extension from Chrome Extension Samples
> See the example below where we request the sample [magic8ball](https://github.com/GoogleChrome/chrome-extensions-samples/tree/main/api-samples/topSites/magic8ball) from from [Google Chrome Extension Samples](https://github.com/GoogleChrome/chrome-extensions-samples) with Edge as the runtime browser.
```bash
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
🔥🔥 Use Edge to start developing a Mozilla Add-On from MDN WebExtensions Examples
> See the example below where we request the sample [Apply CSS](https://github.com/mdn/webextensions-examples/tree/main/apply-css) from [MDN WebExtensions Examples](https://github.com/mdn/webextensions-examples) using Edge as the runtime browser.
```bash
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
🔥🔥🔥 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](https://github.com/mdn/webextensions-examples/tree/main/firefox-code-search) from [MDN WebExtensions Examples](https://github.com/mdn/webextensions-examples) using Chrome and Firefox as the runtime browsers.
```bash
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
## I have An Extension
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`**
```bash
npm install extension --save-dev
```
**Step 2 - Link your npm scripts with the executable Extension.js commands**
```json
{
"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`.
## Using a specific browser for development
### Desktop Browsers
| 
| 
| 
| 
| 
| 
| 
| 
| 
|
| :---------------------------------------------------------------------------------------------------------------------: | :---------------------------------------------------------------------------------------------------: | :-----------------------------------------------------------------------------------------------------: | :---------------------------------------------------------------------------------------------------------: | :-------------------------------------------------------------------------------------------------: | :-------------------------------------------------------------------------------------------------------: | :---------------------------------------------------------------------------------------------------: | :-----------------------------------------------------------------------------------------------------: | :-------------------------------------------------------------------------------------------------------: |
| 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](https://github.com/cezaraugusto/extension.js/issues/59). Most requested features are added first, so thumbs up it to speed-up the development process.
### Mobile Browsers
| | 
|
| :-------------------------------------------------------------------------------------------------------: | :-------------------------------------------------------------------------------------------------------------: |
| 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.
```sh
extension dev --browser=all
```
## License
MIT (c) Cezar Augusto.