Framework-Free: A "bleeding-edge" Chrome extension template built from the ground up using Vite 8 Beta (Rolldown) and the Oxc toolchain. Unlike many templates that rely on extension frameworks (like WXT, CRXJS, or Plasmo), this project is "hand rolled", giving you full control and maximum performance with the latest web standards and dev tooling.

A modern, production-ready "Hello World" demonstrating all 8 major extension features using a high-performance tech stack: Vite 8 (Beta w/ Rolldown), React 19, Tailwind 4, Zod 4, and Oxc dev tooling.

This template implements every major Chrome Extension capability:

• Node.js 22+
• pnpm 9+ (configured with save-exact=true)
• Chrome 116+

# Clone the repo
git clone https://github.com/GitMurf/chrome-extension-template.git
cd chrome-extension-template

# Install dependencies
pnpm install

# Build the extension
pnpm build

1. Open chrome://extensions/
2. Enable Developer mode (toggle in top-right)
3. Click Load unpacked
4. Select the dist/ folder

chrome-extension-template/
├── public/
│   ├── manifest.json       # Extension manifest (Manifest V3)
│   └── images/             # Extension icons (16, 48, 128px)
├── src/
│   ├── background/         # Service Worker (Feature 4)
│   ├── content/            # Content Script (Feature 5)
│   ├── popup/              # Action Popup UI (Feature 1)
│   ├── sidepanel/          # Side Panel UI (Feature 2)
│   ├── options/            # Options Page UI (Feature 3)
│   └── shared/             # Shared code
│       ├── storage/        # Zod schemas + typed helpers
│       ├── messaging/      # Type-safe message protocol
│       └── hooks/          # React hooks (useTheme)
├── __tests__/              # Vitest tests with Chrome API mocks
├── vite.config.ts          # Multi-entry build config
├── vitest.config.ts        # Test configuration
├── tsconfig.json           # Strict TypeScript
└── oxlint.json             # Linter rules
└── .oxfmtrc.json           # Formatting rules

Customize shortcuts at chrome://extensions/shortcuts

# Watch mode (rebuilds on save)
pnpm dev

# Lint (oxlint)
pnpm lint

# Format (oxfmt)
pnpm fmt

# Type check (tsgo)
pnpm typecheck

# Run tests
pnpm test

# Build for testing in Chrome
pnpm build

After running pnpm dev, reload the extension in Chrome (Ctrl+R on the extensions page) to see changes.

Edit public/manifest.json:

{
  "name": "Your Extension Name",
  "description": "Your description here"
}

1. Add to src/shared/messaging/types.ts:

export interface MessageMap {
  // ... existing messages
  YOUR_MESSAGE: { payload: { data: string }; response: { success: boolean } };
}

2. Handle in src/background/index.ts:

case 'YOUR_MESSAGE':
  // Handle your message
  return { success: true };

Edit src/shared/storage/schemas.ts with Zod:

export const SettingsSchema = z.object({
  // ... existing fields
  yourNewField: z.string().default('value'),
});

pnpm build

The dist/ folder contains everything needed for Chrome Web Store submission:

• manifest.json
• background.js
• content.js
• src/popup/index.html
• src/sidepanel/index.html
• src/options/index.html
• images/
• assets/

MIT

• Built with modern tooling from the Oxc project and the Vite ecosystem.
• Used the following Guides and Templates for inspiration:
  • https://www.artmann.co/articles/building-a-chrome-extension-with-vite-react-and-tailwind-css-in-2025
  • https://medium.com/@jamesprivett29/02-building-a-chrome-extension-template-using-vite-react-and-typescript-d5d9912f1b40
  • https://github.com/Jonghakseo/chrome-extension-boilerplate-react-vite
  • https://github.com/JohnBra/vite-web-extension
• See my Tweets on X about "coding in public": https://x.com/GitMurf/status/2013376160454058472