Extemsion

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

Browser extensionReactTailwindCSS
cezaraugusto/extension.jsextension.js.orgextension

README

Extension.js


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


Screenshot 2024-03-25 at 13 06 15


Logo

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, React, and modern JavaScript.

Create A New Extension


  1. ```sh
  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!

https://github.com/cezaraugusto/extension/assets/4672033/7263d368-99c4-434f-a60a-72c489672586

Get Started Immediately


Kickstart Any Sample from Chrome Extension Samples


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:

1. Open your terminal.
2. Navigate to the directory where you want your project.
3. Run the command:
   bash
npx extension dev
  
Replace `` with the name of the sample you wish to use from [Chrome Extension Samples](https://github.com/GoogleChrome/chrome-extensions-samples).

See the example below where we request the sample page-redder from Google Chrome Extension Samples.

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

https://github.com/cezaraugusto/extension/assets/4672033/ee221a94-6ec7-4e04-8553-8812288927f1

Use Microsoft Edge to kickstart any sample from chrome-extesions-sample


Extension.js supports a variety of browsers, including Microsoft Edge. To start an Edge-compatible extension, simply:

1. Open your terminal.
2. Navigate to your desired project directory.
3. Execute:
   bash
npx extension dev --browser=edge
  
Tailor your command by replacing `` 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.


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

https://github.com/cezaraugusto/extension/assets/4672033/2db2a1f6-3110-4380-9a49-dc9d034146aa

Run Mozilla Add-Ons Using Edge


Bridge the gap between Firefox and Edge by running Mozilla Add-Ons using Edge:

1. Navigate to your project directory.
2. Use the command:
   bash
npx extension dev --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.


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

https://github.com/cezaraugusto/extension/assets/4672033/130cb430-1567-419c-8c90-23fddcf20f00

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

  1. ```sh
  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 deps,s
  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.

Using a specific browser for development


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

Screenshot 2024-03-25 at 13 06 15

License


MIT (c) Cezar Augusto.