Extension

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

Browser extensionReactTailwindCSS
extension-js/extension.jsextension.js.orgextension

README

Extension.js


Make it very easy to develop cross-browser extensions.


Create cross-browser extensions with no build configuration.


- 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.

Create A New Extension


  1. ```bash
  2. npx extension create my-extension
  3. cd my-extension
  4. npm run dev
  5. ```

A new browser instance will open up with your extension ready for development.

You are done. Time to hack on your extension!

Web Standards and Modern JavaScript Support


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

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 from Google Chrome Extension Samples.


  1. ```bash
  2. npx extension dev https://github.com/GoogleChrome/chrome-extensions-samples/tree/main/functional-samples/sample.page-redder --browser=edge
  3. ```

🔥 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.


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

🔥🔥 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.


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

I have An Extension


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

  1. ```bash
  2. npm install extension --save-dev
  3. ```

Step 2 - Link your npm scripts with the executable Extension.js commands

  1. ```json
  2. {
  3.   "scripts": {
  4.     "build": "extension build",
  5.     "dev": "extension dev",
  6.     "start": "extension start"
  7.   },
  8.   "devDependencies": {
  9.     // ...other dependencies
  10.     "extension": "latest"
  11.   }
  12. }
  13. ```

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.

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.


  1. ```sh
  2. extension dev --browser=all
  3. ```

Extension.js with all the browser runners open

License


MIT (c) Cezar Augusto.