Technology

Show HN: I made a CLI tool to create web extensions with no build configuration

Posted on by miyuru
Show HN: I made a CLI tool to create web extensions with no build configuration

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

Create cross-browser extensions with no build configuration.

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

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


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

chrome-extension-sample-page-redder-on-edge.mp4


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

    chrome-extension-sample-magic8ball-on-edge.mp4


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


      I have An Extension

      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 deps,s
    "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

      ☑️ = Likely works but no browser runner support yet.
      Brave Browser Google Chrome Microsoft Edge Mozilla Firefox Opera Browser Apple Safari Vivaldi Browser
      ☑️ ✅ ✅ ⛔️ ☑️ ⛔️ ☑️

      Mobile Browsers
      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

      License

      MIT (c) Cezar Augusto.

      Read More

    Leave a Reply

    Your email address will not be published. Required fields are marked *