Skip to content

extension-js/extension.js

 
 

Repository files navigation

The cross-browser extension framework

Extension.js Version Downloads workflow discord

Logo

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

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 //

Watch Demo

create-a-new-extension.mp4

Web Standards and Framework Support

For a preview of extensions running these technologies, see the templates website.

JavaScript
latest
TypeScript
latest
WASM
latest
React
v18+
Vue
v3+
Svelte
v5+
Preact
v10+
Angular
👋
Solid
👋

👋 = PR Welcome!

Get Started Immediately

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.

Watch Demo

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

Try Yourself

//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.

See How It Works

usage-with-an-existing-extension.mp4

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

Desktop Browsers

Chrome
Edge
Firefox
Opera
☑️
Safari
⛔️
Chromium
☑️

The browsers listed above represent those with official extension stores. Note that Chromium-based browsers (like Arc, Brave, Vivaldi, and many others) are theoretically supported through the Chrome/Chromium compatibility layer.

Mobile Browsers

Firefox (Android)
⛔️
Safari (iOS)
⛔️

License

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