Skip to main content
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>
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

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

TypeScript

TypeScriptStrict types across popup, content, and background scripts.

Svelte

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

Vue

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

Preact

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

React

ReactComponent-based UI with full Manifest V3 support and hot module replacement for popup and options.
Looking for production-grade starters with auth, payments, design systems, and full app shells? Browse premium templates at extension.dev.

​
How it works

When you run create --template=<slug>, Extension.js fetches the selected template, scaffolds the project files, and optionally installs dependencies.

​
More templates

Find official template sources in the examples repository: 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