crxjs

name	crxjs
description	CRXJS Chrome extension development — true HMR for popup, options, content scripts, side panels, manifest-driven builds, dynamic content script imports (`?script`, `?script&module`), and `defineManifest` for type-safe manifests. Uses Vite as its build tool. Use when the user mentions CRXJS, crxjs, @crxjs/vite-plugin, 'extension with hot reload', 'HMR for chrome extension', or wants to set up a CRXJS-based Chrome extension project with any framework (React, Vue, Svelte, Solid, Vanilla). Also trigger when the user has an existing CRXJS project and wants to add features, fix HMR issues, or configure content scripts with CRXJS. For general Chrome extension architecture (messaging, CSP, storage, permissions) -> See `samber/cc-skills@chrome-extension` skill.
user-invocable	true
license	MIT
compatibility	Designed for Claude Code, Codex or similar harness. Requires git, node.
metadata	{"author":"samber","version":"1.1.0","openclaw":{"emoji":"📝","homepage":"https://github.com/samber/cc-skills","requires":{"bins":"[Truncated]"},"skill-library-version":"2.4.0"}}
allowed-tools	Read Edit Write Glob Grep Bash(git:*) Bash(gh:*) Bash(npm:*)

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

# 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

// 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:

import { ManifestV3Export }  ;
 manifest = manifestJson  ;