Configure CRXJS Vite plugin for Chrome extension development with content script HMR.
npx skills add https://github.com/Oatse/CWE-Automation --skill crxjs-oatse
Please help me install this Agent Skill. Skill: crxjs Source: https://github.com/Oatse/CWE-Automation/tree/main/.agents/skills/crxjs Command: npx skills add https://github.com/Oatse/CWE-Automation --skill crxjs-oatse
defineManifest for type-safe, dynamic Manifest V3 definitions, with CRXJS auto-resolving HTML entry points and generating the extension output. - Dynamic content script injection: Use ?script and ?script&module import suffixes to get resolved paths for chrome.scripting.executeScript, including main world injection. - Use Case: Scaffold a React-based Chrome extension with npm create crxjs@latest, configure the Vite plugin, and iterate on popup and content script code with instant HMR feedback. ## Quick Start Ask the AI to scaffold a new CRXJS Chrome extension project with your preferred framework and configure the Vite plugin with a type-safe manifest.High-intent search queries and answers about installing and using this skill.
Run npm create crxjs@latest to scaffold a project, or add @crxjs/vite-plugin to an existing Vite project and register the crx plugin with your manifest in vite.config.ts. Run npm run dev and load the dist directory as an unpacked extension.
CRXJS is a thin Vite plugin offering true content script HMR with minimal abstraction over raw Chrome APIs. WXT adds conventions, built-in utilities, and Safari support, while Plasmo provides the highest-level React-focused abstraction.
Yes, CRXJS provides true HMR for content scripts by generating a loader that injects an HMR preamble and client alongside your script. Main world scripts injected via ?script&module do not get HMR.
This happens when the dev server port and HMR port mismatch. Fix it by explicitly setting server.port, strictPort, and server.hmr.port to the same value, such as 5173, in your Vite config.
Import the script with the ?script suffix to get a resolved file path, then pass it to chrome.scripting.executeScript. Use ?script&module for main world injection, which runs without HMR.
CRXJS works with React, Vue, Svelte, Solid, and vanilla TypeScript through their standard Vite plugins. It supports Vite versions 3 through 8-beta, with @vitejs/plugin-react recommended over the SWC variant for best HMR compatibility.
dangvu008Scaffolds, audits, and publishes Manifest V3 Chrome extensions with typed messaging and built-in AI integration.
metaid-developersPackage MetaApp frontend projects into timestamped ZIP archives.
arisngBuild secure MV3 Chrome extensions with manifest.json and service workers.
phrazzldGuide browser extension development with WXT, Plasmo, or CRXJS for Manifest V3.