crxjs

# CRXJS CRXJS is a Chrome extension development tool that provides true HMR for popup, options, content scripts, and side panels. It reads your manifest to auto-generate the extension output, handles content script injection, and manages the service worker build. Under the hood it is a Vite plugin (`@crxjs/vite-plugin`). ## Current status - **Package**: `@crxjs/vite-plugin` (v2.x stable, latest v2.4.0 as of March 2026) - **Scaffolding**: `npm create crxjs@latest` (always use `@latest`) - **Maintained by**: @Toumash and @FliPPeDround (since mid-2025) - **GitHub**: github.com/crxjs/chrome-extension-tools (~4k stars) - **Vite compatibility**: v3 through v8-beta ## Quick start ```bash # Scaffold new project (picks framework interactively) npm create crxjs@latest # Or add to existing Vite project npm install @crxjs/vite-plugin -D ``` ## Vite config by framework CRXJS is added as a Vite plugin. The setup varies slightly per framework. ### React ```typescript // vite.config.ts import { defineConfig } from "vite"; import react from "@vitejs/plugin-react"; import { crx } from "@crxjs/vite-plugin"; import manifest from "./manifest.json"; export default defineConfig({ plugins: [react(), crx({ manifest })], }); ``` Use `@vitejs/plugin-react` (not `plugin-react-swc`) for best HMR compatibility. If you must use SWC, cast the manifest: ```typescript import { ManifestV3Export } from "@crxjs/vite-plugin"; const manifest = manifestJson as ManifestV3Export; ``` ### Vue ```types...