[npm-version-image]: https://img.shields.io/npm/v/extension.svg?color=0971fe
[npm-version-url]: https://www.npmjs.com/package/extension
[npm-downloads-image]: https://img.shields.io/npm/dm/extension.svg?color=0971fe
[npm-downloads-url]: https://www.npmjs.com/package/extension
[action-image]: https://github.com/extension-js/extension.js/actions/workflows/ci.yml/badge.svg?branch=main&color=0971fe
[action-url]: https://github.com/extension-js/extension.js/actions
[discord-image]: https://img.shields.io/discord/1253608412890271755?label=Discord&logo=discord&style=flat&color=0971fe
[discord-url]: https://discord.gg/v9h2RgeTSN
[snyk-image]: https://snyk.io/test/github/extension-js/extension/badge.svg?color=0971fe
[snyk-url]: https://snyk.io/test/github/extension-js/extension

[![Version][npm-version-image]][npm-version-url] [![Downloads][npm-downloads-image]][npm-downloads-url] [![CI][action-image]][action-url] [![Discord][discord-image]][discord-url]

Extension.js

> The cross-browser extension framework

- Create a new extension — How to create a new extension.
- Watch demo — See how creating a new extension works.
- Start from an example — Start from a working baseline.
- I have an extension — Use only specific parts of Extension.js.

Create cross-browser extensions without manual build configuration.
Use Extension.js to develop, build, and preview across browsers with a unified workflow.

Create a new extension

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

``bash
npx extension@latest create my-extension
cd my-extension
npm run dev
`

$3

Watch demo

Web standards and framework support

Get started from a sample

Get started

Start developing an extension using a sample from Chrome Extension Samples

See the example below where we request the sample page-redder from Google Chrome Extension Samples.

$3

Watch demo

$3

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

I have an extension

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.

$3

See how it works

Step 1 - Install extension as a devDependency

`bash
npm install extension@latest --save-dev
`

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

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

Done. You are all set!

- To develop the extension, run npm run dev.
- To build the extension in production mode, run npm run build.
- To visualize the extension in production mode, run npm run build and npm run preview.

Using a specific browser for development

| | | | | | |
| :---------------------------------------------------------------------------: | :-------------------------------------------------------------------------: | :----------------------------------------------------------------------------: | :---------------------------------------------------------------------------: | :-----------------------------------------------------------------------------: | :----------------------------------------------------------------------------: |
| Chrome browser
✅ | Edge browser
✅ | Firefox browser
✅ | Safari browser
(soon) | Chromium-based
✅ | Gecko-based
✅ |

$3

Use these flags with extension dev, extension start, or extension preview:

- Select a browser: --browser
- Custom Chromium binary: --chromium-binary
- Custom Gecko (Firefox) binary: --gecko-binary

Examples:

`bash


Chrome (system default)

npx extension@latest dev --browser=chrome

Edge

npx extension@latest dev --browser=edge

Custom Chrome/Chromium path

npx extension@latest dev --chromium-binary "/Applications/Google Chrome.app/Contents/MacOS/Google Chrome"

Custom Firefox path

npx extension@latest dev --gecko-binary "/Applications/Firefox.app/Contents/MacOS/firefox"
``

Sponsors

License

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