Package Exports

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (@kenkaiiii/queen-chrome-ext) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

Queen Chrome Extension Template

A modern Chrome extension template with TypeScript, React, and Vite for rapid development with Queen Claude AI assistance.

Features

✨ Manifest V3 - Latest Chrome extension standard (mandatory from June 2025)
🔷 TypeScript - Type-safe development
⚡ Vite - Lightning-fast builds
⚛️ React - Modern UI with hooks
🛡️ Security-first - CSP compliant, minimal permissions
🤖 AI-powered - Queen Claude agents for development
🔄 Hot Reload - Fast development cycle
📦 Production Ready - Optimized builds for Chrome Web Store

Quick Start

# Create new Chrome extension project
npx @kenkaiiii/queen-chrome-ext my-extension

# Navigate to project
cd my-extension

# Install dependencies
npm install

# Start development
npm run dev

# Build for production
npm run build

Project Structure

my-extension/
├── public/
│   ├── manifest.json     # Extension manifest (V3)
│   └── icon-*.png       # Extension icons
├── src/
│   ├── background/      # Service worker
│   ├── content/        # Content scripts
│   ├── popup/          # Popup UI (React)
│   └── lib/            # Shared utilities
├── .claude/
│   ├── agents/         # AI assistants
│   └── commands/       # Development commands
└── dist/               # Production build

Development

Available Scripts

npm run dev - Start development server
npm run build - Build for production
npm run preview - Preview production build
npm run type-check - Run TypeScript type checking

Loading in Chrome

Open Chrome and navigate to chrome://extensions
Enable Developer mode
Click Load unpacked
Select the dist folder

Using AI Assistance

The template includes specialized Queen Claude agents:

ChromExtKing - Chrome extension specialist for Manifest V3 development
/build - Production build and deployment command

Chrome APIs

Message Passing

// Background service worker
chrome.runtime.onMessage.addListener((request, sender, sendResponse) => {
  // Handle message
  sendResponse({ success: true });
  return true; // Keep channel open
});

// Content script
const response = await chrome.runtime.sendMessage({ action: 'getData' });

Storage

// Save data
await chrome.storage.local.set({ key: value });

// Load data
const { key } = await chrome.storage.local.get('key');

Permissions

Configure in manifest.json:

{
  "permissions": ["storage", "activeTab"],
  "host_permissions": ["https://*/*"]
}

Production Build

Run npm run build
Test the extension from dist/ folder
Create ZIP: cd dist && zip -r ../extension.zip .
Upload to Chrome Web Store

Best Practices

Keep service workers lightweight
Use chrome.storage for persistence
Request minimal permissions
Follow Chrome Web Store policies
Test on multiple Chrome versions

JSPM

@kenkaiiii/queen-chrome-ext