Name		Name	Last commit message	Last commit date
.github		.github
examples		examples
public		public
scripts		scripts
.gitignore		.gitignore
.knip.json		.knip.json
.lintstagedrc.json		.lintstagedrc.json
.npmrc		.npmrc
.prettierignore		.prettierignore
.prettierrc		.prettierrc
AGENTS.md		AGENTS.md
LICENSE		LICENSE
README.md		README.md
TESTING_RESULTS.md		TESTING_RESULTS.md
eslint.config.mjs		eslint.config.mjs
package.json		package.json
playwright.config.ts		playwright.config.ts
pnpm-lock.yaml		pnpm-lock.yaml
pnpm-workspace.yaml		pnpm-workspace.yaml
run-ci-local.sh		run-ci-local.sh
templates-meta.d.ts		templates-meta.d.ts
templates-meta.json		templates-meta.json
tsconfig.json		tsconfig.json

Repository files navigation

Extension.js Examples

A collection of browser extension examples

This repository contains browser extension examples built with Extension.js. Each example demonstrates different patterns, frameworks, and use cases for building cross-browser extensions.

Run an example from a clone

The examples ship without npm scripts, so run Extension.js directly from the example directory. Run npm install first when the example declares dependencies:

git clone https://github.com/extension-js/examples.git
cd examples/examples/javascript
npm install
npx extension@latest dev .

Prefer a fresh project instead? Every example doubles as a create template:

npx extension@latest create my-extension --template javascript

Web standards and framework support


ESNext Try out	TypeScript Try out	WASM Try out	React Try out	Vue Try out	Svelte Try out	Preact Try out

Examples

Sidebar

JavaScript Example

JavaScript-based extension with a sidebar panel. Adds a sidebar with a simple page.

Repository	examples/javascript
Version	1.0.0
Context	Content Script, Sidebar, Background
JavaScript framework	JavaScript
CSS	CSS
Background included	Yes	Start with this template ↗

React Example

React-based extension with a sidebar panel. Adds a sidebar with a simple page.

Repository	examples/react
Version	1.0.0
Context	Content Script, Sidebar, Background
JavaScript framework	React
CSS	CSS
Background included	Yes	Start with this template ↗

Preact Example

Preact-based extension with a sidebar panel. Adds a sidebar with a simple page.

Repository	examples/preact
Version	1.0.0
Context	Content Script, Sidebar, Background
JavaScript framework	Preact
CSS	CSS
Background included	Yes	Start with this template ↗

Svelte Example

Svelte-based extension with a sidebar panel. Adds a sidebar with a simple page.

Repository	examples/svelte
Version	1.0.0
Context	Content Script, Sidebar, Background
JavaScript framework	Svelte
CSS	CSS
Background included	Yes	Start with this template ↗

Vue Example

Vue.js-based extension with a sidebar panel. Adds a sidebar with a simple page.

Repository	examples/vue
Version	1.0.0
Context	Content Script, Sidebar, Background
JavaScript framework	Vue
CSS	CSS
Background included	Yes	Start with this template ↗

TypeScript Example

TypeScript-based extension with a sidebar panel. Adds a sidebar with a simple page.

Repository	examples/typescript
Version	1.0.0
Context	Content Script, Sidebar, Background
JavaScript framework	JavaScript
CSS	CSS
Background included	Yes	Start with this template ↗

Sidebar Example

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

Repository	examples/sidebar
Version	1.0.0
Context	Sidebar, Background
JavaScript framework	JavaScript
CSS	CSS
Background included	Yes	Start with this template ↗

Sidebar Shadcn Example

React sidebar example using shadcn/ui components. Adds a sidebar panel with a simple React page.

Repository	examples/sidebar-shadcn
Version	1.0.0
Context	Sidebar, Background
JavaScript framework	React
CSS	CSS
Background included	Yes	Start with this template ↗

Transformers JS Example

Transformers.js demo with a sidebar and a content script: classify the active page or your selection on-device via WebGPU/WASM.

Repository	examples/transformers-js
Version	1.0.0
Context	Content, Sidebar, Background
JavaScript framework	JavaScript
CSS	CSS
Background included	Yes	Start with this template ↗

Sidebar Monorepo Turborepo Example

Monorepo example with content script and sidebar.

Repository	examples/sidebar-monorepo-turborepo
Version	1.0.0
Context	Content Script, Sidebar, Background
JavaScript framework	JavaScript
CSS	CSS
Background included	Yes	Start with this template ↗

Sidebar Monorepo Nx Example

Monorepo example with content script and sidebar.

Repository	examples/sidebar-monorepo-nx
Version	1.0.0
Context	Content Script, Sidebar, Background
JavaScript framework	JavaScript
CSS	CSS
Background included	Yes	Start with this template ↗

Action

Action Example

Action popup example. Opens a toolbar popup with a simple page.

Repository	examples/action
Version	1.0.0
Context	Action, Background
JavaScript framework	JavaScript
CSS	CSS
Background included	Yes	Start with this template ↗

Action Locales Example

Action popup example demonstrating i18n with _locales and message placeholders.

Repository	examples/action-locales
Version	1.0.0
Context	Action, Background
JavaScript framework	JavaScript
CSS	CSS
Background included	Yes	Start with this template ↗

Content

Content Example

Content script example that injects a small badge into web pages to demonstrate DOM injection and styling in an extension.

Repository	examples/content
Version	1.0.0
Context	Content Script, Background
JavaScript framework	JavaScript
CSS	CSS
Background included	Yes	Start with this template ↗

Content CSS Modules Example

Content script example styled with CSS Modules. Injects a small badge and shows how to scope styles in content scripts.

Repository	examples/content-css-modules
Version	1.0.0
Context	Content Script, Background
JavaScript framework	JavaScript
CSS	CSS
Background included	Yes	Start with this template ↗

Content Custom Font Example

Content script example that loads custom web fonts. Demonstrates font files and web_accessible_resources setup.

Repository	examples/content-custom-font
Version	1.0.0
Context	Content Script, Background
JavaScript framework	JavaScript
CSS	CSS
Background included	Yes	Start with this template ↗

Content Env Example

Content script example that reads environment variables (.env) and renders a small UI.

Repository	examples/content-env
Version	1.0.0
Context	Content Script, Background
JavaScript framework	JavaScript
CSS	CSS
Background included	Yes	Start with this template ↗

Content Less Example

Content script example styled with Less. Injects a small badge and shows how to organize styles with Less in content scripts.

Repository	examples/content-less
Version	1.0.0
Context	Content Script, Background
JavaScript framework	JavaScript
CSS	Less
Background included	Yes	Start with this template ↗

Content Less Modules Example

Content script example using Less with CSS Modules. Injects a small badge and shows how to scope Less styles in content scripts.

Repository	examples/content-less-modules
Version	1.0.0
Context	Content Script, Background
JavaScript framework	JavaScript
CSS	Less
Background included	Yes	Start with this template ↗

Content Multi One Entry Example

Content script example with four scripts listed in one entry. Each script injects a small element.

Repository	examples/content-multi-one-entry
Version	1.0.0
Context	Content Script, Background
JavaScript framework	JavaScript
CSS	CSS
Background included	Yes	Start with this template ↗

Content Multi Three Entries Example

Content script example split across three entries (2 + 1 + 1). Each script injects a small element.

Repository	examples/content-multi-three-entries
Version	1.0.0
Context	Content Script, Background
JavaScript framework	JavaScript
CSS	CSS
Background included	Yes	Start with this template ↗

Content Preact Example

Content script example rendered with Preact. Mounts a small UI inside a Shadow DOM on any page.

Repository	examples/content-preact
Version	1.0.0
Context	Content Script, Background
JavaScript framework	Preact
CSS	CSS
Background included	Yes	Start with this template ↗

Content React Example

Content script example rendered with React. Mounts a small UI inside a Shadow DOM on any page.

Repository	examples/content-react
Version	1.0.0
Context	Content Script, Background
JavaScript framework	React
CSS	CSS
Background included	Yes	Start with this template ↗

Content Sass Example

Content script example styled with Sass. Injects a small badge and shows how to organize styles with Sass in content scripts.

Repository	examples/content-sass
Version	1.0.0
Context	Content Script, Background
JavaScript framework	JavaScript
CSS	Sass
Background included	Yes	Start with this template ↗

Content Sass Modules Example

A browser extension content script example built with Extension.js using Sass CSS Modules. Demonstrates scoped styles for content scripts with Sass preprocessing.

Repository	examples/content-sass-modules
Version	1.0.0
Context	Content Script, Background
JavaScript framework	JavaScript
CSS	Sass
Background included	Yes	Start with this template ↗

Content Svelte Example

Content script example rendered with Svelte. Mounts a small UI inside a Shadow DOM on any page.

Repository	examples/content-svelte
Version	1.0.0
Context	Content Script, Background
JavaScript framework	Svelte
CSS	CSS
Background included	Yes	Start with this template ↗

Content TypeScript Example

Content script example built with TypeScript. Mounts a small UI and uses typed modules.

Repository	examples/content-typescript
Version	1.0.0
Context	Content Script, Background
JavaScript framework	JavaScript
CSS	CSS
Background included	Yes	Start with this template ↗

Content Vue Example

Content script example rendered with Vue. Mounts a small UI inside a Shadow DOM on any page.

Repository	examples/content-vue
Version	1.0.0
Context	Content Script, Background
JavaScript framework	Vue
CSS	CSS
Background included	Yes	Start with this template ↗

New

New Example

New tab page example using plain JavaScript. Renders a simple page you can customize.

Repository	examples/new
Version	1.0.0
Context	New Tab, Background
JavaScript framework	JavaScript
CSS	CSS
Background included	Yes	Start with this template ↗

New Browser Flags Example

A browser extension example built with Extension.js demonstrating browser-specific features and flags. Shows how to handle browser differences across targets.

Repository	examples/new-browser-flags
Version	1.0.0
Context	Content Script, New Tab, Sidebar, Background
JavaScript framework	JavaScript
CSS	CSS
Background included	Yes	Start with this template ↗

New Config ESLint Example

New tab page example with ESLint configured. Shows how linting is set up in an extension project.

Repository	examples/new-config-eslint
Version	1.0.0
Context	New Tab, Background
JavaScript framework	JavaScript
CSS	CSS
Background included	Yes	Start with this template ↗

New Config Prettier Example

New tab page example with Prettier configured. Shows how formatting is set up in an extension project.

Repository	examples/new-config-prettier
Version	1.0.0
Context	New Tab, Background
JavaScript framework	JavaScript
CSS	CSS
Background included	Yes	Start with this template ↗

New Config Stylelint Example

New tab page example with Stylelint configured. Shows how CSS linting is set up in an extension project.

Repository	examples/new-config-stylelint
Version	1.0.0
Context	New Tab, Background
JavaScript framework	JavaScript
CSS	Sass
Background included	Yes	Start with this template ↗

New Crypto Example

New tab page example demonstrating basic crypto operations inside an extension.

Repository	examples/new-crypto
Version	1.0.0
Context	New Tab, Background
JavaScript framework	JavaScript
CSS	CSS
Background included	Yes	Start with this template ↗

New Env Example

New tab page example demonstrating environment variables (.env) in an extension project.

Repository	examples/new-env
Version	1.0.0
Context	New Tab, Background
JavaScript framework	JavaScript
CSS	CSS
Background included	Yes	Start with this template ↗

New Less Example

New tab page example styled with Less. Renders a simple page and organizes styles with Less.

Repository	examples/new-less
Version	1.0.0
Context	New Tab, Background
JavaScript framework	JavaScript
CSS	Less
Background included	Yes	Start with this template ↗

New Preact Example

New tab page example rendered with Preact. Loads a small Preact app you can extend.

Repository	examples/new-preact
Version	1.0.0
Context	New Tab, Background
JavaScript framework	Preact
CSS	CSS
Background included	Yes	Start with this template ↗

New React Example

A browser extension new tab page example built with Extension.js and React. Demonstrates a React-based new tab page with a working build and preview flow.

Repository	examples/new-react
Version	1.0.0
Context	New Tab, Background
JavaScript framework	React
CSS	CSS
Background included	Yes	Start with this template ↗

New React Router Example

New tab page example using React Router. Shows multiple routes inside the new tab app.

Repository	examples/new-react-router
Version	1.0.0
Context	New Tab, Background
JavaScript framework	React
CSS	CSS
Background included	Yes	Start with this template ↗

New Sass Example

New tab page example styled with Sass. Renders a simple page and organizes styles with Sass.

Repository	examples/new-sass
Version	1.0.0
Context	New Tab, Background
JavaScript framework	JavaScript
CSS	Sass
Background included	Yes	Start with this template ↗

New Svelte Example

New tab page example rendered with Svelte. Loads a small Svelte app you can extend.

Repository	examples/new-svelte
Version	1.0.0
Context	New Tab, Background
JavaScript framework	Svelte
CSS	CSS
Background included	Yes	Start with this template ↗

New TypeScript Example

A browser extension new tab page example built with Extension.js and TypeScript. Demonstrates a type-safe new tab page with a working build and preview flow.

Repository	examples/new-typescript
Version	1.0.0
Context	New Tab, Background
JavaScript framework	JavaScript
CSS	CSS
Background included	Yes	Start with this template ↗

New Vue Example

New tab page example rendered with Vue. Loads a small Vue app you can extend.

Repository	examples/new-vue
Version	1.0.0
Context	New Tab, Background
JavaScript framework	Vue
CSS	CSS
Background included	Yes	Start with this template ↗

Special folders

Special Folders Pages Example

Opens a welcome page on extension load, showcasing the pages/ folder.

Repository	examples/special-folders-pages
Version	1.0.0
Context	Background
JavaScript framework	JavaScript
CSS	CSS
Background included	Yes	Start with this template ↗

Special Folders Scripts Example

Demonstrates scripts/ folder organization and how to run standalone scripts via the extension.

Repository	examples/special-folders-scripts
Version	1.0.0
Context	Background
JavaScript framework	JavaScript
CSS	CSS
Background included	Yes	Start with this template ↗