Adds a sidebar panel to the browser, covered end to end by Playwright tests.
npx extension@latest create my-playwright --template playwright
cd my-playwright
npm install
npm run dev!Powered by Extension.js
Adds a sidebar panel to the browser, covered end to end by Playwright tests.
What you'll see: A sidebar panel with a TypeScript page, plus 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 TypeScript page bundled from src/sidebar/. A content script also mounts a pill inside a Shadow DOM, and clicking it asks the background worker to open the panel.
Designed for Playwright-driven E2E tests. The template ships a sidebar panel together with a Playwright fixture (extension-fixtures) so you can drive the extension from a real browser session in CI.
npx extension@latest create my-playwright --template playwright
cd my-playwright
npm install
npm run devA fresh browser window opens with the extension already loaded.
src/
├── content/
│ ├── ContentApp.ts
│ ├── scripts.ts
│ └── styles.css
├── images/
│ └── icon.png
├── sidebar/
│ ├── index.html
│ ├── scripts.ts
│ ├── SidebarApp.ts
│ └── styles.css
├── background.ts
└── manifest.jsonCloned 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=firefoxBuild for production:
npx extension@latest build . # Chromium (default)
npx extension@latest build . --browser=firefox
npx extension@latest build . --browser=edgePreview 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.