Extension project templates for React, Vue, and more

Start faster by scaffolding extensions from official templates instead of building folder structure and configuration from scratch.

Template capabilities

Ready project structure: Start with a working manifest, scripts, and source layout.
Stack-specific setup: Choose templates by framework and runtime needs.
Faster onboarding: Move from idea to runnable extension in minutes.
Consistent defaults: Reduce setup drift across projects and team members.

Quick usage

npx extension@latest create my-extension --template=<slug>

pnpx extension@latest create my-extension --template=<slug>

yarn dlx extension@latest create my-extension --template=<slug>

bunx extension@latest create my-extension --template=<slug>

deno run -A npm:extension@latest create my-extension --template=<slug>

Replace <slug> with the template you want to start from.

Available templates

Choose the stack default that matches your project. Each card scaffolds a minimal, runnable extension with a working manifest.json.

JavaScript

Vanilla ES modules with no compile step. The fastest way to start.

TypeScript

Strict types across popup, content, and background scripts.

Svelte

Compile-time UI with a tiny runtime, suited to content scripts.

Vue

Single-file components wired up for popup, options, and content scripts.

Preact

React API in a 3kB runtime. A good fit when bundle size matters.

React

Component-based UI with full Manifest V3 support and hot module replacement for popup and options.

How it works

When you run create --template=<slug>, Extension.js fetches the selected template, scaffolds the project files, and optionally installs dependencies. Only the javascript template ships inside the CLI, so it scaffolds offline with no network call. It is also the default when you omit --template. Every other name downloads the template catalog archive at create time. The catalog holds 6 groups and roughly 50 templates: starters, sidebar, content scripts, new tab, toolbar action, and special folders. Run extension create --help to see every name. A name outside the catalog fails with E_TEMPLATE_NOT_FOUND and creates nothing. A failed download is reported as a download error instead, so a network problem never reads like a typo.

Reproducible scaffolds

The template corpus is pinned to an immutable commit of the examples repository. Two scaffolds of the same template always produce the same files, and a shipped CLI never tracks a moving branch. You can point at a different corpus:

# A branch, tag, or commit SHA of extension-js/examples
EXTENSION_CREATE_TEMPLATE_REF=main extension create my-extension --template=react

# Override the archive URL entirely
EXTENSION_CREATE_TEMPLATE_URL=https://example.com/examples.zip extension create my-extension --template=react

EXTENSION_CREATE_TEMPLATE_REF accepts a branch, a tag, or a commit SHA. Setting it to main restores the floating branch behavior.

Scaffold from a URL

--template also accepts a GitHub URL or a ZIP URL in place of a catalog name:

extension create my-extension --template=https://github.com/extension-js/examples/tree/main/examples/content

More templates

Find official template sources in the examples repository:

extension-js/examples

Template folder names map directly to --template=<slug>.

Best practices

Use templates to scaffold your project quickly.
Start with a template that matches a technology stack you already know.
Choose the browser extension context that best fits your project requirements.

Next steps

Learn how browser runners help you validate extension behavior.
Learn how Extension.js handles Environment variables.

​Template capabilities

​Quick usage

​Available templates