Best Chrome Extension Boilerplates in 2026

Chrome Extensions: 3 Billion User Distribution Channel

Chrome extensions are underrated as a distribution channel. The Chrome Web Store reaches every Chrome user — 3 billion people. Extensions that solve a real problem can grow virally without ad spend.

In 2026, Manifest V3 (MV3) is the mandatory standard, having replaced MV2. The MV3 migration changed how extensions work — background scripts became service workers, webRequestBlocking became declarative. Boilerplates now abstract MV3's quirks.

Quick Comparison

Starter	Language	React	TypeScript	Hot Reload	Build Tool	Best For
Plasmo	TS	✅	✅	✅	Parcel	Full-featured React extensions
WXT	TS/JS	✅	✅	✅	Vite	Modern Vite-based extensions
CRXJS	TS/JS	✅	✅	✅	Vite	Vite extensions (manual setup)
chrome-extension-boilerplate-react	TS	✅	✅	✅	Vite	React/Vite extension template

The Starters

Plasmo — Best Full-Featured

Price: Free | Creator: Plasmo team

The most feature-complete Chrome extension framework. File-based routing for extension surfaces (popup, options, content scripts, background, newtab), automatic manifest generation, React/Vue/Svelte support, messaging system, storage API wrapper, and CSUI (Content Script UI) that renders React into any webpage.

pnpm create plasmo my-extension
# Choose: React + TypeScript

Plasmo file structure:

├── popup.tsx       # → Extension popup
├── options.tsx     # → Options page
├── newtab.tsx      # → New tab page
├── background.ts   # → Service worker
└── contents/
    ├── overlay.tsx # → Content script with React UI
    └── inline.tsx  # → Inline content script

Plasmo CSUI — Inject React into any page:

// contents/sidebar.tsx
import cssText from "data-text:./sidebar.css"
import type { PlasmoCSConfig } from "plasmo"

export const config: PlasmoCSConfig = {
  matches: ["https://github.com/*"],  // Only on GitHub
}

export const getStyle = () => {
  const style = document.createElement("style")
  style.textContent = cssText
  return style
}

export default function Sidebar() {
  return <div className="my-sidebar">Hello GitHub!</div>
}

Choose if: You want the most productive React extension development experience.

WXT — Best Vite-Based

Price: Free | Creator: Aaron Klinker

Vite-based alternative to Plasmo. First-class TypeScript, auto-imports, entrypoints for all extension surfaces, multi-browser support (Chrome, Firefox, Safari), and better tree-shaking than Plasmo.

npx wxt@latest init my-extension

Choose if: Vite's ecosystem is important (plugins, speed) or you need multi-browser support beyond Chrome.

Chrome Extension Architecture (MV3)

Understanding MV3's service worker model:

// background.ts — Service worker (not persistent!)
chrome.runtime.onInstalled.addListener(() => {
  console.log('Extension installed');
});

// Service workers can be terminated! Store state in storage, not memory
chrome.storage.local.set({ initialized: true });

// Message passing between popup and content scripts
chrome.runtime.onMessage.addListener((message, sender, sendResponse) => {
  if (message.type === 'GET_DATA') {
    fetchData().then(sendResponse);
    return true;  // Keep channel open for async response
  }
});

// popup.tsx — Communicates with background
const response = await chrome.runtime.sendMessage({ type: 'GET_DATA' });

Monetizing Chrome Extensions

Chrome extensions can be monetized via:

Stripe subscription — Link to web app for billing; extension checks subscription status via API
License keys — Simple, no web backend required; validate against a key server
Chrome Web Store payments — Deprecated; Google removed it in 2020
Freemium — Free features + paid features locked behind account/subscription

The standard pattern in 2026: extension checks localStorage or calls your API to verify active subscription before unlocking premium features.

Compare Chrome extension boilerplates on StarterPick.