Get Started Immediately#

Welcome to the fast track for developing cross-browser extensions with Extension.js. Whether you're quickly prototyping or working on full-scale development, this guide will help you get started right away.

Kickstart Any Sample from Chrome Extension Samples#

Start development by using a sample from the Chrome Extension Samples repository. It's a great way to learn best practices and save time.

Steps:#

1. Open your terminal.
2. Navigate to the directory where you want to create your project.
3. Run the following command:

npx extension@latest dev <sample-name>

Note: Replace <sample-name> with the sample you want to use from Chrome Extension Samples.

Example:#

Below, we use the page-redder sample from Google Chrome Extension Samples.

Use Microsoft Edge to Kickstart Any Sample#

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

Steps:#

1. Open your terminal.
2. Navigate to the directory where you want to create your project.
3. Run this command:

npx extension@latest dev <sample-name> --browser=edge

Replace <sample-name> with the sample you want to use.

Example:#

Below is an example of using the magic8ball sample from Google Chrome Extension Samples and running it on Edge.

Run Mozilla Add-Ons Using Edge#

You can also adapt Mozilla Add-Ons to run on Edge with Extension.js:

Steps:#

1. Navigate to your project directory.
2. Run this command:

npx extension@latest dev <addon-name> --browser=edge --polyfill=true

This will fetch a Mozilla Add-On and adapt it for Edge.

Example:#

Below is an example of fetching the Apply CSS sample from MDN WebExtensions Examples and running it on Edge.

Tips to Get Started#

• To use TypeScript, add a tsconfig.json file to the root of your project.
• To use React, add React as a dependency in your package.json.
• Any tsconfig.json with React support will make your project ready for React and TypeScript.
• If you need to handle assets not declared in the manifest, learn more about Special Folders.

Best Practices#

• Use the extension package: The extension package provides a set of commands to help you build, run, and deploy your extension. It also offers a variety of templates to kickstart your project.
• Use the --browser flag: The --browser flag allows you to specify the target browser for your extension. This ensures that your extension is compatible with the browser you're targeting.
• Use the --polyfill flag: The --polyfill flag helps you adapt Mozilla Add-Ons to run on Edge. It fetches the necessary polyfills to ensure compatibility.

Next Steps#

Start exploring browser extension development with Extension.js by creating your first extension.