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.
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
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 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 ↗ |
DevTools Panel Example
Adds a devtools panel to the browser that reads the inspected page.
| Repository | examples/devtools |  |
| Version | 1.0.0 | |
| Context | DevTools | |
| JavaScript framework | JavaScript | |
| CSS | CSS | |
| Background included | No | Start with this template ↗ |
React DevTools Panel Example
Adds a React devtools panel to the browser that reads the inspected page.
| Repository | examples/devtools-react |  |
| Version | 1.0.0 | |
| Context | DevTools | |
| JavaScript framework | React | |
| CSS | CSS | |
| Background included | No | Start with this template ↗ |
Preact DevTools Panel Example
Adds a devtools panel written in Preact that reads the inspected page.
| Repository | examples/devtools-preact |  |
| Version | 1.0.0 | |
| Context | DevTools | |
| JavaScript framework | Preact | |
| CSS | CSS | |
| Background included | No | Start with this template ↗ |
TypeScript DevTools Panel Example
Adds a devtools panel to the browser that reads the inspected page.
| Repository | examples/devtools-typescript |  |
| Version | 1.0.0 | |
| Context | DevTools | |
| JavaScript framework | TypeScript | |
| CSS | CSS | |
| Background included | No | Start with this template ↗ |
Svelte DevTools Panel Example
Adds a Svelte devtools panel to the browser that reads the inspected page.
| Repository | examples/devtools-svelte |  |
| Version | 1.0.0 | |
| Context | DevTools | |
| JavaScript framework | Svelte | |
| CSS | CSS | |
| Background included | No | Start with this template ↗ |
Vue DevTools Panel Example
Adds a devtools panel built with Vue that reads the inspected page.
| Repository | examples/devtools-vue |  |
| Version | 1.0.0 | |
| Context | DevTools | |
| JavaScript framework | Vue | |
| CSS | CSS | |
| Background included | No | Start with this template ↗ |
Content Example
Injects a small badge into every web page you visit, with an options page that moves it to the left or right edge.
| Repository | examples/content |  |
| Version | 1.0.0 | |
| Context | Content Script, Options, Background | |
| JavaScript framework | JavaScript | |
| CSS | CSS | |
| Background included | Yes | Start with this template ↗ |
Content CSS Modules Example
Injects a small styled badge into every web page you visit.
| 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
Injects a badge rendered in a custom font into every web page you visit, with an options page that turns the custom font on and off.
| Repository | examples/content-custom-font |  |
| Version | 1.0.0 | |
| Context | Content Script, Options, Background | |
| JavaScript framework | JavaScript | |
| CSS | CSS | |
| Background included | Yes | Start with this template ↗ |
Content Env Example
Injects a small panel showing the extension's environment values into every web page you visit.
| 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
Injects a small styled badge into every web page you visit, with a Less options page that moves it to the left or right edge.
| Repository | examples/content-less |  |
| Version | 1.0.0 | |
| Context | Content Script, Options, Background | |
| JavaScript framework | JavaScript | |
| CSS | Less | |
| Background included | Yes | Start with this template ↗ |
Content Less Modules Example
Injects a small styled badge into every web page you visit, with a Less modules options page that moves it to the left or right edge.
| Repository | examples/content-less-modules |  |
| Version | 1.0.0 | |
| Context | Content Script, Options, Background | |
| JavaScript framework | JavaScript | |
| CSS | Less | |
| Background included | Yes | Start with this template ↗ |
Content Multi One Entry Example
Injects four small elements into every web page you visit.
| 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
Injects four small elements into every web page you visit.
| 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
Shows an overlay UI on web pages and an options page that moves it from right to left.
| Repository | examples/content-preact |  |
| Version | 1.0.0 | |
| Context | Content Script, Options, Background | |
| JavaScript framework | Preact | |
| CSS | CSS | |
| Background included | Yes | Start with this template ↗ |
Content React Example
Shows a small overlay UI on every web page, with a React options page that moves it from right to left.
| Repository | examples/content-react |  |
| Version | 1.0.0 | |
| Context | Content Script, Options, Background | |
| JavaScript framework | React | |
| CSS | CSS | |
| Background included | Yes | Start with this template ↗ |
Content Sass Example
Injects a small styled badge into every web page you visit, with a Sass options page that moves it to the left or right edge.
| Repository | examples/content-sass |  |
| Version | 1.0.0 | |
| Context | Content Script, Options, Background | |
| JavaScript framework | JavaScript | |
| CSS | Sass | |
| Background included | Yes | Start with this template ↗ |
Content Sass Modules Example
Injects a small styled badge into every web page you visit, with a Sass modules options page that moves it to the left or right edge.
| Repository | examples/content-sass-modules |  |
| Version | 1.0.0 | |
| Context | Content Script, Options, Background | |
| JavaScript framework | JavaScript | |
| CSS | Sass | |
| Background included | Yes | Start with this template ↗ |
Content Svelte Example
Shows a Svelte overlay on every web page you visit, with an options page that moves it from right to left.
| Repository | examples/content-svelte |  |
| Version | 1.0.0 | |
| Context | Content Script, Options, Background | |
| JavaScript framework | Svelte | |
| CSS | CSS | |
| Background included | Yes | Start with this template ↗ |
Content TypeScript Example
Shows a small overlay UI on every web page, with an options page that moves it from right to left.
| Repository | examples/content-typescript |  |
| Version | 1.0.0 | |
| Context | Content Script, Options, Background | |
| JavaScript framework | JavaScript | |
| CSS | CSS | |
| Background included | Yes | Start with this template ↗ |
Content Vue Example
Shows a small overlay UI on every web page, with a Vue options page that moves it from right to left.
| Repository | examples/content-vue |  |
| Version | 1.0.0 | |
| Context | Content Script, Options, Background | |
| JavaScript framework | Vue | |
| CSS | CSS | |
| Background included | Yes | Start with this template ↗ |
New Example
New tab page example using plain JavaScript. Renders a simple page you can customize.
| Repository | examples/newtab |  |
| 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/newtab-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/newtab-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/newtab-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/newtab-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/newtab-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/newtab-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/newtab-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/newtab-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/newtab-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/newtab-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/newtab-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/newtab-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/newtab-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/newtab-vue |  |
| Version | 1.0.0 | |
| Context | New Tab, Background | |
| JavaScript framework | Vue | |
| CSS | CSS | |
| Background included | Yes | Start with this template ↗ |
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 ↗ |
Init Example
A basic browser extension example built with Extension.js. A starting point for developers learning current browser extension tooling.
| Repository | examples/init |  |
| Version | 1.0.0 | |
| Context | ||
| JavaScript framework | JavaScript | |
| CSS | CSS | |
| Background included | No | Start with this template ↗ |
MIT (c) Cezar Augusto and the Extension.js authors.