Get started immediately#

Build and run working browser extensions in minutes. This guide gives you the fastest path to start from real-world samples with Extension.js.

Run Chrome extension samples fast#

Use samples from the Chrome Extension Samples repository to validate your setup and learn the workflow quickly.

Steps#

1. Open your terminal.
2. Move to the directory where you want the project.
3. Run:

npx extension@latest dev <sample-name>

Replace <sample-name> with any sample from Chrome Extension Samples.

Example#

This example uses page-redder.

Run samples in Microsoft Edge#

Extension.js supports Microsoft Edge out of the box.

Steps#

1. Open your terminal.
2. Move to the directory where you want the project.
3. Run:

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

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

Example#

This example runs magic8ball in Edge.

Run Mozilla add-ons in Edge with polyfill#

You can also run Mozilla add-ons in Edge by enabling the polyfill.

Steps#

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

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

This fetches a Mozilla add-on and adapts it for Edge.

Example#

This example fetches Apply CSS from MDN WebExtensions Examples and runs it in Edge.

Quick tips#

• Use TypeScript: add a tsconfig.json file to your project root.
• Use React: add react and react-dom to your package.json.
• A tsconfig.json configured for React enables TypeScript + React authoring.
• If you need to handle assets not declared in the manifest, learn more about Special Folders.

Best practices#

• Use the extension package to build, run, and bundle your extension from one toolchain.
• Use --browser to target a specific browser while developing.
• Use --polyfill when adapting Mozilla add-ons for Edge compatibility.

Next steps#

• Continue with create your first extension.
• Explore starter templates for your preferred stack.
• Review dev command options to target specific browsers and binaries.