extension-js/extension.jsPublic

NotificationsYou must be signed in to change notification settings
Fork122
Star4.8k

🧩 The cross-browser extension framework

License

MIT license

4.8k stars 122 forks Branches Tags Activity

Star

Notifications

You must be signed in to change notification settings

Branches Tags

Folders and files

Name		Name	Last commit message	Last commit date
Latest commit History 1,750 Commits
.github		.github
.husky		.husky
extensions		extensions
programs		programs
scripts		scripts
templates		templates
.env.example		.env.example
.gitignore		.gitignore
.npmrc		.npmrc
.prettierignore		.prettierignore
.prettierrc		.prettierrc
CHANGELOG.md		CHANGELOG.md
CONTENT_SCRIPTS.md		CONTENT_SCRIPTS.md
CONTRIBUTING.md		CONTRIBUTING.md
LICENSE		LICENSE
README.md		README.md
RELEASING.md		RELEASING.md
TELEMETRY.md		TELEMETRY.md
eslint.config.mjs		eslint.config.mjs
extension-env.d.ts		extension-env.d.ts
package.json		package.json
playwright.config.ts		playwright.config.ts
pnpm-lock.yaml		pnpm-lock.yaml
pnpm-workspace.yaml		pnpm-workspace.yaml
tsconfig.json		tsconfig.json
turbo.json		turbo.json
vitest.workspace.ts		vitest.workspace.ts

Repository files navigation

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 thecreate command to generate a new extension. Also works with pnpm, yarn, and bun.

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

Watch demo

create-a-new-extension.mp4

Web standards and framework support


ESNext Try out	TypeScript Try out	WASM (soon)	React Try out	Vue Try out	Svelte Try out	Preact Try out

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 samplepage-redder fromGoogle Chrome Extension Samples.

Watch demo

chrome-extension-sample-page-redder-on-edge.mp4

Try Yourself

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.

See how it works

usage-with-an-existing-extension.mp4

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.

Using a specific browser for development


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

Browser flags and custom binaries

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"