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.
JavaScript Example
JavaScript-based extension with a sidebar panel. Adds a sidebar with a simple page.
| Repository | examples/javascript |  |
| Version | 3.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 | 3.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 | 3.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 | 3.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 | 3.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 | 3.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 | 0.0.1 | |
| 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 | 0.0.1 | |
| Context | Sidebar, Background | |
| JavaScript framework | React | |
| CSS | CSS | |
| Background included | Yes | Start with this template ↗ |
Sidebar Transformers JS Example
Sidebar example that runs a small Transformers.js demo inside a side panel.
| Repository | examples/sidebar-transformers-js |  |
| Version | 0.0.1 | |
| Context | Sidebar, Background | |
| JavaScript framework | JavaScript | |
| CSS | CSS | |
| Background included | Yes | Start with this template ↗ |
Sidebar Monorepo Turbopack Example
Monorepo example with content script and sidebar.
| Repository | examples/sidebar-monorepo-turbopack |  |
| Version | 0.0.1 | |
| 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 | 0.0.1 | |
| Context | Action, Background | |
| JavaScript framework | JavaScript | |
| CSS | CSS | |
| Background included | Yes | Start with this template ↗ |
Action ChatGPT Example
React action popup example. Opens a toolbar popup and renders a basic React UI.
| Repository | examples/action-chatgpt |  |
| Version | 0.0.1 | |
| Context | Action, Background | |
| JavaScript framework | React | |
| 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 | 0.0.1 | |
| Context | Action, Background | |
| JavaScript framework | JavaScript | |
| CSS | CSS | |
| Background included | Yes | Start with this template ↗ |
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 | 0.0.1 | |
| 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 | 0.0.1 | |
| 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 | 0.0.1 | |
| 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 | 0.0.1 | |
| 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 | 0.0.1 | |
| 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 | 0.0.1 | |
| 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 | 0.0.1 | |
| 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 | 0.0.1 | |
| 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 | 0.0.1 | |
| 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 | 0.0.1 | |
| 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 | 0.0.1 | |
| 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 | 0.0.1 | |
| 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 | 0.0.1 | |
| 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 | 0.0.1 | |
| 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 | 0.0.1 | |
| Context | Content Script, 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/new |  |
| Version | 0.0.1 | |
| 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 | 0.0.1 | |
| 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 | 0.0.1 | |
| 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 | 0.0.1 | |
| 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 | 0.0.1 | |
| 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 | 0.0.1 | |
| 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 | 0.0.1 | |
| 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 | 0.0.1 | |
| 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 | 0.0.1 | |
| 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 | 0.0.1 | |
| 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 | 0.0.1 | |
| 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 | 0.0.1 | |
| 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 | 0.0.1 | |
| 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 | 0.0.1 | |
| 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 | 0.0.1 | |
| 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 | 0.0.1 | |
| 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 | 0.0.1 | |
| 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 | 0.0.1 | |
| Context | ||
| JavaScript framework | JavaScript | |
| CSS | CSS | |
| Background included | No | Start with this template ↗ |
MIT (c) Cezar Augusto and the Extension.js Authors.
