🧩 Extension

🔥 Get Started Immediately

Welcome to the fast track of browser extension development with Extension! Whether you're looking to prototype quickly or delve into full-scale development, you've made the right choice. Let's get your development environment set up and running in no time.

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

Use Microsoft Edge to Kickstart Any Sample

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

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

Some Tips To Help You Get Started

  • To use TypeScript, add a tsconfig.json file to the root of your extension.
  • To use React, just ensure you have it as a dependency in your package.json.
  • Any tsconfig.json with React support makes your project React/TypeScript ready.
  • If you need to handle assets not declared in the manifest, learn more about Special Folders.

Next Steps

Start exploring the world of browser extension development with Extension by Create Your First Extension.

🧩 Extension • create cross-browser extensions with no build configuration.