Adds a sidebar panel to the browser with a simple page.

What you'll see: A small UI injected into any web page, isolated in a Shadow DOM so site styles don't bleed through.

How it works: The manifest registers a side panel (chromium:side_panel / firefox:sidebar_action) that loads a JavaScript page bundled from src/sidebar/. A content script mounts a JavaScript UI inside a Shadow DOM and applies scoped styles so the host page can't bleed through. On Chromium the in-page pill opens the panel. Firefox only opens a sidebar from a toolbar gesture, so the gecko build renders the pill inert with a hint to use the toolbar icon instead.

npx extension@latest create my-sidebar --template sidebar
cd my-sidebar
npm install
npm run dev

A fresh browser window opens with the extension already loaded.

src/
├── content/
│   ├── scripts.js
│   └── styles.css
├── images/
│   ├── icon-128.png
│   ├── icon-16.png
│   ├── icon-32.png
│   ├── icon-48.png
│   ├── icon-64.png
│   └── icon.png
├── sidebar/
│   ├── index.html
│   ├── scripts.js
│   └── styles.css
├── background.js
└── manifest.json

Cloned this repo instead? The examples ship without npm scripts, so run Extension.js directly from the example directory. Run npm install first when the example declares dependencies.

Run the extension in development mode. Target a browser with --browser:

npx extension@latest dev .                  # Chromium (default)
npx extension@latest dev . --browser=chrome
npx extension@latest dev . --browser=edge
npx extension@latest dev . --browser=firefox

Build for production:

npx extension@latest build .                # Chromium (default)
npx extension@latest build . --browser=firefox
npx extension@latest build . --browser=edge

Preview the production build with the bundled browser:

npx extension@latest preview .

This template ships an end-to-end check (template.spec.ts) validated by the examples-repo CI on every commit.

• Extension.js docs
• Templates index
• GitHub: extension-js/extension.js