Skip to content

Introduction

What is WebExtend?

WebExtend is a modern build tool designed to streamline web extension development. It provides a powerful yet simple development environment that lets you create cross-browser extensions using the latest web technologies. Whether you're building a simple utility or a complex browser extension, WebExtend offers the tools and workflows to make your development process efficient and enjoyable.

Why WebExtend?

While there are several tools available for web extension development like Plasmo, WXT, and CRXJS, WebExtend stands out by addressing common pain points and offering unique advantages:

Key Differentiators

  • Superior Hot Module Replacement (HMR): Full HMR support for all extension components including content_scripts, maintaining state during development
  • Developer-Friendly APIs: Clean, intuitive APIs that reduce boilerplate and complexity
  • Optimized Performance: Built on Rsbuild for exceptional build speeds and development experience
  • Zero Configuration: Sensible defaults that work out of the box while maintaining flexibility for customization

Common Pain Points Solved

Many existing tools suffer from limitations that WebExtend specifically addresses:

  • ❌ No content_scripts HMR support, requiring page refreshes
  • ❌ Complex or confusing APIs that increase learning curve
  • ❌ Limited browser compatibility
  • ❌ Slow build times and development experience

WebExtend solves these issues with a thoughtful, developer-first approach.

Main Features

Declarative Entry Points

WebExtend uses a file-system based approach for managing extension entrypoints. Simply create files in the conventional directories, and WebExtend automatically configures your manifest.json. This reduces configuration overhead and makes your project structure more intuitive.

src/
  ├── popup/
  │   └── index.tsx      # Automatically registered as popup
  ├── options/
  │   └── index.tsx      # Automatically registered as options page
  └── contents/
      └── github.tsx     # Automatically injected into github.com

See entry points for more details.

Seamless Development Experience

Experience a development environment that just works:

  • 🔥 True HMR for all components including content scripts
  • 🚀 Automatic browser opening and extension running
  • ⚡️ Instant feedback loop for rapid development
  • 🛠️ Scaffold support with project templates and component generators

Multi-Browser Support

Write once, run everywhere. WebExtend handles browser-specific manifest configurations and polyfills automatically:

  • ✅ Chrome/Chromium-based browsers
  • ✅ Firefox
  • ✅ Safari
  • ✅ Edge

See browser support for more details.

ESM & TypeScript Support

Modern JavaScript features work out of the box:

  • 📦 Native ESM support
  • 🔷 First-class TypeScript support
  • 🎯 Path aliases

Framework Agnostic

Choose the tools that work best for your project:

  • 🔧 Use any modern framework (React, Vue, Svelte, etc.)
  • 🎨 Use any styling solution (CSS Modules, Tailwind, etc.)
  • 🔌 Easy integration with existing tools

See using libraries for integration guides.

Lightning Fast Performance

Built on Rsbuild, WebExtend delivers exceptional performance:

  • ⚡️ Blazing fast dev server startup
  • 📦 Efficient bundling with automatic code splitting
  • 🔄 Quick rebuild times with intelligent caching
  • 📊 Bundle size optimization

Comparisons

Here's how WebExtend stacks up against other popular web extension development tools:

FeatureWebExtendPlasmoWXTCRXJS
BundlerRsbuildParcelViteVite
First-class TypeScript support
File-based entry points
Live-reloading + HMR for extension pages🟡 [1]
Live-reloading + HMR for content_scripts🟡 [2]🟡 [2:1]
MV3 and MV2 support🟡 [3]
Multi-browser support🟡 [4]
Automatic extension running
Build performance⚡️ FastModerateFastFast
Configuration complexityLowModerateHighLow
Learning curveGentleModerateSteepModerate
Community and ecosystemGrowingLargeMediumMedium

Getting Help

We're here to help you succeed with WebExtend:

Pre-Requisite Knowledge

To make the most of WebExtend, familiarize yourself with basic web extension concepts and architecture.

Helpful resources:

Ready to Start?

Now that you understand what WebExtend offers, you're ready to build your first extension!

Getting started with WebExtend is straightforward:

bash
npx web-extend@latest init

Head over to our Quick Start guide to begin your journey.



  1. Only React HMR support available. ↩︎

  2. Only basic live-reloading without state preservation. ↩︎ ↩︎

  3. Limited to Manifest V3 only. ↩︎

  4. Primarily focused on Chrome/Chromium browsers. ↩︎

Released under the MIT License.