Skip to main content

Introduction to CRXJS Vite Plugin

CRXJS Vite Plugin is a tool that helps you build Chrome Extensions using modern web development technology. It brings the polished developer experience of Vite to Chrome extension development with true HMR and zero-config setup.

Quick start

Get your first extension running in 90 seconds

Installation

Detailed installation and setup instructions

Concepts

Learn about manifests, pages, and content scripts

Configuration

Advanced configuration options

Why CRXJS?

Building Chrome Extensions shouldn’t require wrestling with build tools. CRXJS simplifies extension development by combining Vite’s refined features with a simple configuration strategy.

Modern developer experience

We’ve grown to expect a polished developer experience when building web apps. Tools like Vite make it easy to start with HMR, fast builds, and modern JavaScript. Unfortunately, Chrome Extension development has traditionally been more challenging.

The problem

You search for the perfect boilerplate, but the most popular ones:
  • Don’t support HMR for content scripts
  • Require configuration in multiple places
  • Only support one framework
  • Need complex setup for adding new pages

The solution

CRXJS Vite Plugin solves these problems with a single principle: use the manifest.

Key features

Full Vite plugin ecosystem

Leverage any Vite-compatible plugins with zero extra setup

Zero configuration

Start developing immediately with intelligent defaults

Manifest V3 support

Built for modern Chrome extensions with enhanced security

True hot module replacement

Instant UI updates while preserving extension state - even works with content scripts

Static asset import

Directly reference images and fonts in your code

Auto web-accessible resources

Automatic generation of web_accessible_resources manifest entries

Use the manifest

CRXJS parses your manifest.json to discover entry files for your extension. The manifest is already the central document that declares most files and configuration for your extension - why duplicate that information elsewhere?
CRXJS automatically finds HTML pages, content scripts, background workers, and other resources by reading your manifest file. No separate configuration needed.

Framework support

CRXJS works with any framework that Vite supports:
  • React
  • Vue
  • Svelte
  • Solid
  • Vanilla JavaScript/TypeScript
The plugin is framework-agnostic, so you can use your favorite tools and libraries without special configuration.

Get started

Ready to build your first extension? Head over to the Quick start guide to get up and running in 90 seconds, or check out the Installation guide for detailed setup instructions.
New to Chrome Extensions? Check out the Concepts section to learn about manifests, pages, and content scripts.

Build docs developers (and LLMs) love