chrome-extension-tools Documentation

Build cross-browser extensions with native HMR and zero-config setup

4,180 stars TypeScript TypeScript 11 files · ~4,867 tokens #chrome-extension#javascript#manifest-v2#manifest-v3#npm-package#rollup#rollup-js#rollup-plugin
RAW Doc

Technical Documentation: crxjs/chrome-extension-tools

ℹ️ Provenance: Multi-Tier Ingestion · CodeWiki Reference

Overview (`README.md`)

CRXJS

[📚 Documentation](https://crxjs.dev) | [💬 Discord ](https://discord.com/invite/FnnE4XR7Wj)

📦 Create CRXJS Project

shell
npm create crxjs@latest

[!IMPORTANT]
@latest MUST NOT be omitted, otherwise npm may resolve to a cached and outdated version of the package.

✨ Features

  • 🧩 Full Vite Plugin Ecosystem - Leverage any Vite-compatible plugins with zero extra setup
  • ⚙️ Zero Configuration - Start developing immediately with intelligent defaults
  • 3️⃣ Manifest V3 Support - Built for modern Chrome extensions with enhanced security
  • 🔥 True Hot Module Replacement - Instant UI updates while preserving extension state 🎈works with content scripts
  • 📁 Static Asset Import - Directly reference images/fonts in your code
  • 🤖 Auto Web-Accessible Resources - Automatic generation of web_accessible_resources manifest entries

[!NOTE]
Looking for MV2 support? See rollup-plugin

💻 Development

  • Clone this repository
  • Install pnpm
  • Install dependencies using pnpm install
  • Build the vite-plugin project using pnpm build:vite-plugin
  • Playgrounds project is located at playgrounds/**, using pnpm play can run the playgrounds
  • Cd into the vite-plugin directory using cd packages/vite-plugin
  • Test using pnpm run test
  • Use DeepWiki to learn more about CRXJS

💝 Contributors

This project exists thanks to all the people who contribute.

And thank you to all our backers! 🙏

🤝 Supporting

If these plugins have helped you ship your product faster, please consider
sponsoring me on GitHub.

Overview (`.changeset/README.md`)

Changesets

Hello and welcome! This folder has been automatically generated by @changesets/cli, a build tool that works
with multi-package repos, or single-package repos to help you version and publish your code. You can
find the full documentation for it in our repository

We have a quick list of common questions to get you started engaging with this project in
our documentation

Overview (`design/README.md`)

Design Resources

You can find design files for CRXJS in this folder.

Logo Design

Logo was made by
Free Logo Maker: Design Custom Logos | Adobe Express

Fonts used: Lato-BlackItalic

Colors used: 298CD6,F2BAE4

Icon url: https://thenounproject.com/term/puzzle/8651

Icon by: Daniel Heitz (@dnlhtz) / Twitter

Pallets

By blue:
ColorSpace - Color Palettes Generator and Color Gradient Tool

By pink:
ColorSpace - Color Palettes Generator and Color Gradient Tool

Overview (`packages/rollup-plugin/README.md`)

[rollup-plugin-chrome-extension](https://www.extend-chrome.dev/rollup-plugin)


The bundler configuration for a Chrome Extension can be pretty complex.

Use manifest.json as the input. Every file in the manifest will be bundled or
copied to the output folder.

RPCE simplifies project config and supports many of Vite's features in the
Chrome Extension environment, including HMR.

[Documentation](https://www.extend-chrome.dev/rollup-plugin)

We have
v3 boilerplates
for React JavaScript,
React TypeScript and
Svelte,
as well as instructions for
setting up your own project.

See the documentation for usage
and how to get started.

Supporting

If these plugins have helped you ship your product faster, please consider
sponsoring me on GitHub.

Contributing

We encourage pull requests! This is a
pnpm monorepo, so use pnpm instead of Yarn or npm.

Overview (`packages/vite-plugin/README.md`)

CRXJS

[📚 Documentation](https://crxjs.dev/vite-plugin) | [💬 Discord ](https://discord.gg/5yHKEa9v)

📦 Create CRXJS Project

shell
npm create crxjs@latest

[!IMPORTANT]
@latest MUST NOT be omitted, otherwise npm may resolve to a cached and outdated version of the package.

✨ Features

  • 🧩 Full Vite Plugin Ecosystem - Leverage any Vite-compatible plugins with zero extra setup
  • ⚙️ Zero Configuration - Start developing immediately with intelligent defaults
  • 3️⃣ Manifest V3 Support - Built for modern Chrome extensions with enhanced security
  • 🔥 True Hot Module Replacement - Instant UI updates while preserving extension state 🎈works with content scripts
  • 📁 Static Asset Import - Directly reference images/fonts in your code
  • 🤖 Auto Web-Accessible Resources - Automatic generation of web_accessible_resources manifest entries

[!NOTE]
Looking for MV2 support? See rollup-plugin

💻 Contributing

See CONTRIBUTING.md for local development workflows.

💝 Contributors

This project exists thanks to all the people who contribute.

And thank you to all our backers! 🙏

🤝 Supporting

If these plugins have helped you ship your product faster, please consider
sponsoring me on GitHub.

Overview (`playgrounds/react/README.md`)

React + Vite + CRXJS

This template helps you quickly start developing Chrome extensions with React, TypeScript and Vite. It includes the CRXJS Vite plugin for seamless Chrome extension development.

Features

  • React with TypeScript
  • TypeScript support
  • Vite build tool
  • CRXJS Vite plugin integration
  • Chrome extension manifest configuration

Quick Start

  1. Install dependencies:
bash
npm install
  1. Start development server:
bash
npm run dev
  1. Build for production:
bash
npm run build

Project Structure

  • src/popup/ - Extension popup UI
  • src/content/ - Content scripts
  • manifest.config.ts - Chrome extension manifest configuration

Documentation

Chrome Extension Development Notes

  • Use manifest.config.ts to configure your extension
  • The CRXJS plugin automatically handles manifest generation
  • Content scripts should be placed in src/content/
  • Popup UI should be placed in src/popup/

Overview (`playgrounds/solid/README.md`)

Solid + Vite + CRXJS

This template helps you quickly start developing Chrome extensions using Solid, TypeScript, and Vite. It includes the CRXJS Vite plugin for seamless Chrome extension development.

Features

  • Solid with TypeScript
  • TypeScript support
  • Vite build tool
  • CRXJS Vite plugin integration
  • Chrome extension manifest configuration

Quick Start

  1. Install dependencies:
bash
npm install
  1. Start the development server:
bash
npm run dev
  1. Build the production version:
bash
npm run build

Project Structure

  • src/popup/ - Extension popup UI
  • src/content/ - Content scripts
  • manifest.config.ts - Chrome extension manifest configuration

Documentation

Chrome Extension Development Notes

  • Use manifest.config.ts to configure your extension
  • CRXJS plugin automatically handles manifest generation
  • Content scripts should be placed in src/content/
  • Popup UI should be placed in src/popup/

Overview (`playgrounds/svelte/README.md`)

Svelte + Vite + CRXJS

This template helps you quickly start developing Chrome extensions with Svelte, TypeScript and Vite. It includes the CRXJS Vite plugin for seamless Chrome extension development.

Features

  • Svelte with component syntax
  • TypeScript support
  • Vite build tool
  • CRXJS Vite plugin integration
  • Chrome extension manifest configuration

Quick Start

  1. Install dependencies:
bash
npm install
  1. Start development server:
bash
npm run dev
  1. Build for production:
bash
npm run build

Project Structure

  • src/popup/ - Extension popup UI
  • src/content/ - Content scripts
  • manifest.config.ts - Chrome extension manifest configuration

Chrome Extension Development Notes

  • Use manifest.config.ts to configure your extension
  • The CRXJS plugin automatically handles manifest generation
  • Content scripts should be placed in src/content/
  • Popup UI should be placed in src/popup/

Documentation

Overview (`playgrounds/vue/README.md`)

Vue 3 + Vite + CRXJS

This template helps you quickly start developing Chrome extensions with Vue 3, TypeScript and Vite. It includes the CRXJS Vite plugin for seamless Chrome extension development.

Features

  • Vue 3 with <script setup> syntax
  • TypeScript support
  • Vite build tool
  • CRXJS Vite plugin integration
  • Chrome extension manifest configuration

Quick Start

  1. Install dependencies:
bash
npm install
  1. Start development server:
bash
npm run dev
  1. Build for production:
bash
npm run build

Project Structure

  • src/popup/ - Extension popup UI
  • src/content/ - Content scripts
  • manifest.config.ts - Chrome extension manifest configuration

Documentation

Chrome Extension Development Notes

  • Use manifest.config.ts to configure your extension
  • The CRXJS plugin automatically handles manifest generation
  • Content scripts should be placed in src/content/
  • Popup UI should be placed in src/popup/

Overview (`.agents/skills/tsdown/README.md`)

tsdown Skills

Agent skills that help AI coding agents understand and work with tsdown, the elegant library bundler.

Installation

bash
npx skills add rolldown/tsdown

This will install all tsdown skills (including the migration skill). To install only the tsdown skill:

bash
npx skills add rolldown/tsdown --skill tsdown

What's Included

The tsdown skill provides Claude Code with knowledge about:

  • Core Concepts - What tsdown is, why use it, key features
  • Configuration - Config file formats, options, multiple configs, workspace support
  • Build Options - Entry points, output formats, type declarations, targets
  • Dependency Handling - External/inline dependencies, auto-externalization
  • Output Enhancement - Shims, CJS defaults, package exports
  • Framework Support - React, Vue, Solid, Svelte integration
  • Advanced Features - Plugins, hooks, programmatic API, Rolldown options
  • CLI Commands - All CLI options and usage patterns
  • Migration - Migrating from tsup to tsdown

Usage

Once installed, Claude Code will automatically use tsdown knowledge when:

  • Building TypeScript/JavaScript libraries
  • Configuring bundlers for library projects
  • Setting up type declaration generation
  • Working with multi-format builds (ESM, CJS, IIFE, UMD)
  • Migrating from tsup
  • Building framework component libraries

Example Prompts

text
Set up tsdown to build my TypeScript library with ESM and CJS formats
text
Configure tsdown to generate type declarations and bundle for browsers
text
Add React support to my tsdown config with Fast Refresh
text
Help me migrate from tsup to tsdown
text
Set up a monorepo build with tsdown workspace support
  • tsdown-migrate - Dedicated skill for migrating from tsup to tsdown, with complete option mappings, config transformations, and troubleshooting guidance.

Documentation

License

MIT

Overview (`.agents/skills/tsdown/references/README.md`)

tsdown Skill References

This directory contains detailed reference documentation for the tsdown skill.

Created Files (38 total)

Core Guides (3)

  • ✅ guide-getting-started.md - Installation, first bundle, CLI basics
  • ✅ guide-migrate-from-tsup.md - Migration guide from tsup
  • ✅ guide-introduction.md - Introduction and key features

Configuration Options (22)

  • ✅ option-config-file.md - Config file formats, loaders, workspace
  • ✅ option-entry.md - Entry point configuration with globs
  • ✅ option-output-format.md - Output formats (ESM, CJS, IIFE, UMD)
  • ✅ option-output-directory.md - Output directory and extensions
  • ✅ option-dts.md - TypeScript declaration generation
  • ✅ option-target.md - Target environment (ES2020, ESNext, etc.)
  • ✅ option-platform.md - Platform (node, browser, neutral)
  • ✅ option-dependencies.md - External and inline dependencies
  • ✅ option-sourcemap.md - Source map generation
  • ✅ option-minification.md - Minification (boolean | 'dce-only' | MinifyOptions)
  • ✅ option-tree-shaking.md - Tree shaking configuration
  • ✅ option-cleaning.md - Output directory cleaning
  • ✅ option-watch-mode.md - Watch mode configuration
  • ✅ option-shims.md - ESM/CJS compatibility shims
  • ✅ option-package-exports.md - Auto-generate package.json exports
  • ✅ option-css.md - CSS handling (experimental, full pipeline: preprocessors, Lightning CSS, PostCSS, code splitting)
  • ✅ option-unbundle.md - Preserve directory structure
  • ✅ option-root.md - Root directory for output structure mapping
  • ✅ option-copy.md - Copy static files to output
  • ✅ option-cjs-default.md - CommonJS default export handling
  • ✅ option-log-level.md - Logging configuration
  • ✅ option-lint.md - Package validation (publint & attw)

Executable (1)

  • ✅ option-exe.md - Standalone executable bundling (Node.js SEA)

Advanced Topics (6)

  • ✅ advanced-plugins.md - Rolldown, Rollup, Unplugin support
  • ✅ advanced-hooks.md - Lifecycle hooks system
  • ✅ advanced-programmatic.md - Node.js API usage
  • ✅ advanced-rolldown-options.md - Pass options to Rolldown
  • ✅ advanced-ci.md - CI environment detection and CI-aware options

Advanced (continued)

  • ✅ advanced-benchmark.md - Performance benchmarks

Framework Recipes (5)

  • ✅ recipe-react.md - React library setup with JSX
  • ✅ recipe-vue.md - Vue library setup with SFC
  • ✅ recipe-solid.md - Solid.js library setup
  • ✅ recipe-svelte.md - Svelte component libraries
  • ✅ recipe-wasm.md - WASM module support

Reference (1)

  • ✅ reference-cli.md - Complete CLI command reference

Coverage Status

Created: 38 files (100% complete)

Current Skill Features

The tsdown skill now includes comprehensive coverage of:

✅ Core Functionality

  • Getting started and installation
  • Entry points and glob patterns
  • Output formats (ESM, CJS, IIFE, UMD)
  • TypeScript declarations
  • Configuration file setup
  • CLI reference

✅ Build Options

  • Target environment configuration
  • Platform selection
  • Dependency management
  • Source maps
  • Minification
  • Tree shaking
  • Output cleaning
  • Watch mode

✅ Advanced Features

  • Plugins (Rolldown, Rollup, Unplugin)
  • Lifecycle hooks
  • ESM/CJS shims
  • Package exports generation
  • Package validation (publint, attw)
  • Programmatic API (Node.js)
  • Output directory customization
  • CSS handling and modules
  • Unbundle mode
  • CI environment detection and CI-aware options

✅ Framework & Runtime Support

  • React with JSX/TSX
  • React Compiler integration
  • Vue with SFC support
  • Vue type generation (vue-tsc)
  • WASM module bundling (rolldown-plugin-wasm)

✅ Migration

  • Complete migration guide from tsup
  • Compatibility notes

Usage

The skill is now ready for use with comprehensive coverage of core features. Additional files can be added incrementally as needed.

File Naming Convention

Files are prefixed by category:

  • guide-* - Getting started guides and tutorials
  • option-* - Configuration options
  • advanced-* - Advanced topics (plugins, hooks, programmatic API)
  • recipe-* - Framework-specific recipes
  • reference-* - CLI and API reference

Creating New Reference Files

When creating new reference files:

  1. Read source documentation from /docs directory
  2. Simplify for AI consumption - concise, actionable content
  3. Include code examples - practical, copy-paste ready
  4. Add cross-references - link to related options
  5. Follow naming convention - use appropriate prefix
  6. Keep it focused - one topic per file

Updating Existing Files

When documentation changes:

  1. Check git diff: git diff <sha>..HEAD -- docs/
  2. Update affected reference files
  3. Update SKILL.md if needed
  4. Update GENERATION.md with new SHA

See skills/GENERATION.md for detailed update instructions.

--- METRICS ---

Explore Related Technologies & Topics

View All 9,111+ Repositories →

Discover similar high-velocity repositories, agent skills, and OpenAPI specifications across the ecosystem.

#chrome-extension Browse chrome-extension catalog → #javascript Browse javascript catalog → #manifest-v2 Browse manifest-v2 catalog → #manifest-v3 Browse manifest-v3 catalog → #npm-package Browse npm-package catalog → #rollup Browse rollup catalog → ⚡ MCP Servers Model Context Protocol → 🧠 Agent Skills Prompt & rule files → 🔌 OpenAPI Specs REST & Swagger schemas →