# Technical Documentation: crxjs/chrome-extension-tools

> ℹ️ **Provenance:** Multi-Tier Ingestion · [CodeWiki Reference](https://codewiki.google/github.com/crxjs/chrome-extension-tools)

### Overview (`README.md`)

<h1 align="center">CRXJS</h1>

<p align="center">
Build cross-browser extensions with native <code>HMR</code> and <code>zero-config</code> setup
</p>

<p align="center">
<a href="https://www.npmjs.com/package/@crxjs/vite-plugin">
<img src="https://img.shields.io/npm/v/@crxjs/vite-plugin?color=298cd6&amp;label=CRXJS&labelColor=f2bae4" alt="NPM version">
</a>
</p>

<h2 align="center">
<a href="https://crxjs.dev">📚 Documentation</a> |
<a href="https://discord.com/invite/FnnE4XR7Wj">💬 Discord </a>
</h2>


## 📦 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`](packages/rollup-plugin/README.md)  

## 💻 Development

- Clone this repository
- Install [pnpm](https://pnpm.io)
- 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](https://deepwiki.com/crxjs/chrome-extension-tools) to learn more about CRXJS

## 💝 Contributors

This project exists thanks to all the people who contribute.

And thank you to all our backers! 🙏

<a href="https://github.com/crxjs/chrome-extension-tools/graphs/contributors">
  <img src="https://contrib.rocks/image?repo=crxjs/chrome-extension-tools" />
</a>

## 🤝 Supporting

If these plugins have helped you ship your product faster, please consider
[sponsoring me](https://github.com/sponsors/jacksteamdev) 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](https://github.com/changesets/changesets)

We have a quick list of common questions to get you started engaging with this project in
[our documentation](https://github.com/changesets/changesets/blob/main/docs/common-questions.md)

---

### 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](https://www.adobe.com/express/create/logo)

Fonts used: Lato-BlackItalic

Colors used: 298CD6,F2BAE4

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

Icon by: [Daniel Heitz (@dnlhtz) / Twitter](https://twitter.com/dnlhtz)

## Pallets

By blue:
[ColorSpace - Color Palettes Generator and Color Gradient Tool](https://mycolor.space/?hex=%23298CD6&sub=1)

By pink:
[ColorSpace - Color Palettes Generator and Color Gradient Tool](https://mycolor.space/?hex=%23F2BAE4&sub=1)

---

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

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

[](https://www.npmjs.com/package/rollup-plugin-chrome-extension)
[](https://github.com/crxjs/rollup-plugin-chrome-extension)

[](#typescript)

<a href="https://www.extend-chrome.dev/rollup-plugin" rel="noopener">
  <img width=200px height=200px src="https://imgur.com/wEXnCYK.png" alt="rollup-plugin-chrome-extension logo"></a>

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](https://www.extend-chrome.dev/rollup-plugin#chrome-extension-boilerplates)
for [React JavaScript](https://github.com/crxjs/js-react-boilerplate),
[React TypeScript](https://github.com/crxjs/ts-react-boilerplate) and
[Svelte](https://github.com/kyrelldixon/svelte-tailwind-extension-boilerplate),
as well as [instructions](https://www.extend-chrome.dev/rollup-plugin#usage) for
setting up your own project.

See the [documentation](https://www.extend-chrome.dev/rollup-plugin) for usage
and how to get started.

## Supporting

If these plugins have helped you ship your product faster, please consider
[sponsoring me](https://github.com/sponsors/jacksteamdev) on GitHub.

## Contributing

We encourage pull requests! This is a
[pnpm monorepo](https://pnpm.io/workspaces), so use pnpm instead of Yarn or npm.

---

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

<h1 align="center">CRXJS</h1>

<p align="center">
Modern Chrome extension development with built-in <code>HMR</code> and <code>zero-config</code> setup
</p>

<p align="center">
<a href="https://www.npmjs.com/package/@crxjs/vite-plugin">
<img src="https://img.shields.io/npm/v/@crxjs/vite-plugin?color=298cd6&amp;label=CRXJS&labelColor=f2bae4" alt="NPM version">
</a>
</p>

<h2 align="center">
<a href="https://crxjs.dev/vite-plugin">📚 Documentation</a> |
<a href="https://discord.gg/5yHKEa9v">💬 Discord </a>
</h2>


## 📦 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`](packages/rollup-plugin/README.md)  

## 💻 Contributing

See [CONTRIBUTING.md](./CONTRIBUTING.md) for local development workflows.

## 💝 Contributors

This project exists thanks to all the people who contribute.

And thank you to all our backers! 🙏

<a href="https://github.com/crxjs/chrome-extension-tools/graphs/contributors">
  <img src="https://contrib.rocks/image?repo=crxjs/chrome-extension-tools" />
</a>

## 🤝 Supporting

If these plugins have helped you ship your product faster, please consider
[sponsoring me](https://github.com/sponsors/jacksteamdev) 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
```

2. Start development server:

```bash
npm run dev
```

3. 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

- [React Documentation](https://reactjs.org/)
- [Vite Documentation](https://vitejs.dev/)
- [CRXJS Documentation](https://crxjs.dev/vite-plugin)

## 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
```

2. Start the development server:

```bash
npm run dev
```

3. 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

- [Solid Documentation](https://solidjs.com/docs)
- [Vite Documentation](https://vitejs.dev/)
- [CRXJS Documentation](https://crxjs.dev/vite-plugin)

## 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
```

2. Start development server:

```bash
npm run dev
```

3. 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

- [Svelte Documentation](https://svelte.dev/)
- [Vite Documentation](https://vitejs.dev/)
- [CRXJS Documentation](https://crxjs.dev/vite-plugin)

---

### 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
```

2. Start development server:

```bash
npm run dev
```

3. 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

- [Vue 3 Documentation](https://vuejs.org/)
- [Vite Documentation](https://vitejs.dev/)
- [CRXJS Documentation](https://crxjs.dev/vite-plugin)

## 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](https://tsdown.dev), 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

```
Set up tsdown to build my TypeScript library with ESM and CJS formats
```

```
Configure tsdown to generate type declarations and bundle for browsers
```

```
Add React support to my tsdown config with Fast Refresh
```

```
Help me migrate from tsup to tsdown
```

```
Set up a monorepo build with tsdown workspace support
```

## Related Skills

- **[tsdown-migrate](https://github.com/rolldown/tsdown/tree/main/skills/tsdown-migrate)** - Dedicated skill for migrating from tsup to tsdown, with complete option mappings, config transformations, and troubleshooting guidance.

## Documentation

- [tsdown Documentation](https://tsdown.dev)
- [GitHub Repository](https://github.com/rolldown/tsdown)
- [Rolldown](https://rolldown.rs)
- [Migration Guide](https://tsdown.dev/guide/migrate-from-tsup)

## 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 ---
- Files Extracted: 11
- Estimated Token Budget: ~4779 tokens
- Canonical Reference: https://codewiki.google/github.com/crxjs/chrome-extension-tools