Repository files navigation

• Create A New Extension — How to create a new extension.
• Get Started Immediately — Get work done in no time.
• Start From An Example — Start with your favorite tool.
• I have An Extension — Use only specific parts of Extension.js.

Extension.js makes it very easy to develop cross-browser extensions.
Developers prefer it for its fast builds, unified interface, and zero configuration setup.

Use thecreate command to generate a new extension. Also works with pnpm, yarn, and bun.

npx extension@latest create my-extensioncd my-extensionnpm run dev

ESNext latest	TypeScript latest	WASM latest	React 18+	Vue 3+	Svelte 5+	Preact 10+	Angular 👋	Solid 👋

👋 = PR Welcome!

Start developing an extension using a sample from Chrome Extension Samples

See the example below where we request the samplepage-redder fromGoogle Chrome Extension Samples.

npx extension@latest dev https://github.com/GoogleChrome/chrome-extensions-samples/tree/main/functional-samples/sample.page-redder --browser=edge

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.

Step 1 - Install extension as adevDependency

npm install extension@latest --save-dev

Step 2 - Link your npm scripts with the executable Extension.js commands

{"scripts": {"build":"extension build","dev":"extension dev","preview":"extension preview"  },"devDependencies": {// ...other dependencies"extension":"latest"  }}

Done. You are all set!

• To develop the extension, runnpm run dev.
• To build the extension in production mode, runnpm run build.
• To visualize the extension in production mode, runnpm run build andnpm run preview.

Chrome browser ✅	Edge browser ✅	Firefox browser ✅	Opera browser ☑️	Safari browser ❌	Chromium-based ☑️	Gecko-based ☑️	Firefox (Android) ❌	Safari (iOS) ❌

Use these flags withextension dev,extension start, orextension preview:

• Select a browser:--browser <chrome | edge | firefox>
• Custom Chromium binary:--chromium-binary <path-to-binary>
• Custom Gecko (Firefox) binary:--gecko-binary <path-to-binary>

Examples:

# Chrome (system default)npx extension@latest dev --browser=chrome# Edgenpx extension@latest dev --browser=edge# Custom Chrome/Chromium pathnpx extension@latest dev --chromium-binary"/Applications/Google Chrome.app/Contents/MacOS/Google Chrome"# Custom Firefox pathnpx extension@latest dev --gecko-binary"/Applications/Firefox.app/Contents/MacOS/firefox"

MIT (c) Cezar Augusto and the Extension.js Authors.