Create Chrome Extension

🚀 A powerful NPX CLI tool for generating Chrome extension boilerplate code with modern frameworks and build tools.

Features

• Multiple Frameworks: Support for React and Vue.js
• Language Options: JavaScript and TypeScript variants
• Extension Types: Popup, Content Script, Background Script, or Full Extension
• Modern Tooling: Vite-based build system with hot reload
• Manifest V3: Latest Chrome Extension API support
• Interactive CLI: User-friendly prompts for configuration
• Best Practices: Organized project structure and code patterns

Quick Start

Create a new Chrome extension in seconds:

npx create-chrome-extension my-extension

Or with specific options:

npx create-chrome-extension my-extension --framework react --language typescript --template popup

Usage

Interactive Mode

Simply run the command and follow the prompts:

npx create-chrome-extension

The CLI will ask you to configure:

• Extension name and description
• Framework (React/Vue.js)
• Language (JavaScript/TypeScript)
• Extension type (popup/content/background/full)
• Required permissions
• Author information

Command Line Options

npx create-chrome-extension [project-name] [options]

Options:
  -f, --framework <framework>   Frontend framework (react, vue)
  -l, --language <language>     Programming language (javascript, typescript)
  -t, --template <template>     Extension template (popup, content, background, full)
  --skip-install               Skip npm install
  -h, --help                   Display help for command

Extension Types

Popup Extension

• Browser action with popup interface
• Perfect for quick actions and settings
• Includes modern UI with storage integration

Content Script Extension

• Runs on web pages
• Modify page content and behavior
• Includes floating UI example

Background Extension

• Service worker for background tasks
• Handle events and manage extension state
• Context menu integration

Full Extension

• Combines all extension types
• Complete Chrome extension solution
• Maximum functionality

Generated Project Structure

my-extension/
├── public/
│   ├── manifest.json       # Extension manifest
│   └── icons/             # Extension icons
├── src/
│   ├── popup/             # Popup UI components
│   │   ├── App.jsx        # Main popup component
│   │   ├── popup.jsx      # Popup entry point
│   │   └── popup.css      # Popup styles
│   ├── content/           # Content scripts
│   │   └── content.js     # Content script logic
│   ├── background/        # Background scripts
│   │   └── background.js  # Service worker
│   └── shared/            # Shared utilities
├── dist/                  # Built extension (generated)
├── vite.config.js         # Build configuration
├── package.json           # Dependencies and scripts
└── README.md              # Project documentation

Development Workflow

After creating your extension:

1. Install dependencies (if not done automatically):

   npm install

2. Start development server:

   npm run dev

3. Load extension in Chrome:

   • Open chrome://extensions
   • Enable "Developer mode"
   • Click "Load unpacked"
   • Select the dist folder

4. Build for production:

   npm run build

5. Test with web-ext:

   npm run web-ext

Framework Support

React

• JavaScript: Complete React setup with modern hooks
• TypeScript: Fully typed React components with Chrome APIs
• Features: Hot reload, modern build pipeline, optimized for extensions

Vue.js

• JavaScript: Vue 3 composition API setup
• TypeScript: Type-safe Vue components with Chrome API types
• Features: Single file components, reactive state management

Chrome Extension APIs

Generated extensions include examples for:

• Storage API: Persistent data storage
• Tabs API: Tab management and information
• Scripting API: Dynamic script injection
• Runtime API: Extension messaging
• Action API: Browser action management
• Context Menus: Right-click menu integration

Build System

Vite Configuration

• Hot Reload: Instant updates during development
• Code Splitting: Optimized bundle sizes
• Modern JavaScript: Latest ES features support
• TypeScript: Full type checking and compilation

Extension Packaging

• Manifest V3: Latest Chrome extension format
• Permissions: Minimal required permissions
• Icons: Provided icon templates
• CSP Compliance: Content Security Policy ready

Testing

Run the test suite:

npm test

Generate coverage report:

npm run test:coverage

Contributing

We welcome contributions! Please see CONTRIBUTING.md for details.

Development Setup

1. Clone the repository
2. Install dependencies: npm install
3. Run tests: npm test
4. Test CLI locally: npm run dev

License

MIT License - see LICENSE file for details.

Support

• 📖 Chrome Extension Documentation
• 🐛 Report Issues
• 💡 Feature Requests

Roadmap

• [ ] Additional framework support (Svelte, Angular)
• [ ] Web extension support (Firefox, Edge)
• [ ] Advanced templates (options page, devtools)
• [ ] Extension store publishing helpers
• [ ] GitHub Actions workflows
• [ ] Extension testing utilities

Happy extension building! 🎉