WXT + Vite browser extension boilerplate

⚡ Modern Browser Extension Development

Build powerful browser extensions with WXT and Vite's lightning-fast development experience. Cross-browser compatibility, TypeScript support, and modern tooling for professional extension development.

The Modern Extension Stack

WXT (Web Extension Toolkit) combined with Vite creates the ultimate development environment for browser extensions. Get hot module replacement, TypeScript support, and optimized builds out of the box.

Why WXT + Vite?

• Lightning Fast Development: Hot reload for instant feedback during development
• Cross-Browser Ready: Single codebase works on Chrome, Firefox, Safari, and Edge
• Modern JavaScript: ES modules, async/await, and latest web APIs
• TypeScript First: Full type safety with auto-completion and error checking

---

🛠️ Development Experience

Hot Module Replacement

Instant Updates
Changes appear immediately in your extension without manual reloading. Maintain extension state during development for faster iteration cycles.

Smart Reloading
Automatic content script injection and background script updates. Development server handles all the complex extension reloading logic.

TypeScript Integration

Type-Safe Extension APIs
Complete TypeScript definitions for all browser extension APIs. Catch errors at compile-time instead of runtime.

IntelliSense Support
Full auto-completion for extension APIs, manifest properties, and custom code. Enhanced developer productivity with VS Code integration.

---

🌐 Cross-Browser Compatibility

Universal Extension Format

Manifest V3 Ready
Built with the latest Manifest V3 specification for future-proof extensions. Automatic polyfills for older browser versions.

Platform Adaptations
Automatic adjustments for browser-specific differences. Single source code deploys to all major browsers.

Browser-Specific Features

Chrome Extensions
Full Chrome API support including declarativeNetRequest, offscreen documents, and service workers.

Firefox Add-ons
WebExtensions API compatibility with Firefox-specific optimizations and manifest adaptations.

Safari Extensions
Safari Web Extensions support with native macOS and iOS integration capabilities.

---

🚀 Extension Architecture

Modular Component System

Content Scripts
Isolated scripts that interact with web pages. Secure communication with background scripts and popup interfaces.

Background Service Workers
Persistent background processing with event-driven architecture. Handle API calls, data processing, and extension lifecycle.

Popup & Options Pages
Modern React/Vue components for extension UI. Responsive design with theme support and accessibility features.

Advanced Features

Storage Management
Efficient data persistence across browser sessions. Sync storage for cross-device extension data.

Permissions System
Granular permission requests with user-friendly explanations. Dynamic permission handling for enhanced security.

Communication Layer
Type-safe message passing between extension components. Promise-based APIs for cleaner async code.

---

📦 Build & Distribution

Optimized Production Builds

Code Splitting
Automatic bundle optimization for faster loading. Tree shaking removes unused code for smaller file sizes.

Asset Optimization
Image compression, CSS minification, and resource bundling. Optimized for Chrome Web Store and other marketplaces.

Multi-Browser Packaging

Automated Builds
Single command generates packages for all target browsers. Consistent versioning and metadata across platforms.

Store Submission Ready
Pre-configured for Chrome Web Store, Firefox Add-ons, and Safari Extensions. Includes required icons and metadata.

---

💡 Perfect For

Productivity Tools
Tab management, bookmark organizers, and workflow automation extensions with rich user interfaces.

SaaS Integration
Browser extensions that connect to your web application. User authentication, data sync, and seamless integration.

Developer Tools
Code analysis, debugging utilities, and development workflow enhancements with advanced browser API access.

Content Enhancement
Web page modifications, content blocking, and user experience improvements across websites.

Data Collection
Privacy-compliant data gathering, analytics, and user behavior tracking for business insights.

---

🎯 Technical Advantages

Modern Tooling

Vite Build System
Ultra-fast builds with efficient caching. Development server starts in milliseconds, not seconds.

ESM Support
Native ES modules with dynamic imports. Better code organization and smaller bundle sizes.

Plugin Ecosystem
Rich Vite plugin ecosystem for additional functionality. Easy integration with popular frameworks and libraries.

Developer Productivity

Debugging Tools
Enhanced debugging experience with source maps and development tools. Browser extension DevTools integration.

Testing Framework
Unit and integration testing setup for extension components. Mock browser APIs for reliable testing.

Documentation
Comprehensive guides and examples for common extension patterns. TypeScript definitions serve as inline documentation.