WXT — Next-Gen Framework for Browser Extension Development

Introduction

WXT simplifies browser extension development by providing a Vite-powered build system, file-based routing for entry points, and automatic manifest generation. It eliminates the boilerplate of managing multiple browser targets and extension manifest formats.

What WXT Does

• Scaffolds and builds browser extensions for Chrome, Firefox, Safari, and Edge from one codebase
• Generates Manifest V2 or V3 automatically based on target browser configuration
• Provides hot module replacement during development without manual extension reloading
• Auto-imports browser APIs and framework utilities (Vue, React, Svelte, or vanilla)
• Handles content scripts, background workers, popups, options pages, and side panels via file conventions

Architecture Overview

WXT wraps Vite as its bundler and adds an extension-aware build pipeline. Each file in the entrypoints/ directory maps to an extension component (background, content script, popup). At build time, WXT reads these entry points, generates the appropriate manifest.json, and bundles each entry point with its dependencies. A development server injects HMR clients into content scripts and background workers for instant feedback.

Self-Hosting & Configuration

• Initialize with npx wxt@latest init and select your UI framework
• Configure in wxt.config.ts for target browsers, permissions, and build options
• Place entry points in the entrypoints/ directory following naming conventions
• Add static assets to the public/ directory
• Build for production with wxt build which outputs per-browser directories ready for store submission

Key Features

• File-based entry point discovery removes manual manifest configuration
• Supports React, Vue, Svelte, Solid, or vanilla TypeScript without additional setup
• Output analysis and bundle size reporting for store submission limits
• Built-in storage utilities with type-safe wrappers around browser.storage
• ZIP packaging command for direct upload to Chrome Web Store and Firefox Add-ons

Comparison with Similar Tools

• Plasmo — similar DX-focused framework; WXT uses Vite (Plasmo uses Parcel) and has broader browser targeting
• CRXJS (Vite plugin) — Vite plugin for Chrome only; WXT supports all major browsers and manifest versions
• webpack manual setup — requires extensive configuration; WXT handles manifest generation and HMR automatically
• Extension CLI (Google) — scaffolding only; WXT provides the full build and dev lifecycle
• webextension-polyfill — compatibility shim only; WXT is a complete framework with build tooling

FAQ

Q: Does WXT support Manifest V3? A: Yes. It generates MV3 for Chromium browsers and MV2 for Firefox by default, configurable per target.

Q: Can I use WXT with an existing extension? A: Yes. Migrate by moving entry points into the entrypoints/ directory and removing manual manifest.json.

Q: How does hot reload work for content scripts? A: WXT injects a WebSocket client that triggers page-level reload when content script files change.

Q: Does it support publishing to multiple stores? A: WXT builds separate outputs per browser. Use wxt zip to produce store-ready archives for each target.

Sources

• https://github.com/wxt-dev/wxt
• https://wxt.dev/guide/installation.html