# WXT — Next-Gen Framework for Browser Extension Development

> A TypeScript-first framework for building cross-browser extensions with hot reload, auto-imports, and built-in support for Chrome, Firefox, Safari, and Edge from a single codebase.

## Install

Save in your project root:

# WXT — Next-Gen Framework for Browser Extension Development

## Quick Use
```bash
npx wxt@latest init my-extension
cd my-extension
npm run dev   # launches browser with hot reload
```

## 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

---
Source: https://tokrepo.com/en/workflows/asset-45df8b08
Author: AI Open Source