https://github.com/sujalxplores/chrome-seed

A blazing-fast Chrome extension boilerplate with React 19, TypeScript, and Vite. Features modern development tools like Biome for linting, Tailwind CSS for styling, and GitHub Actions for CI/CD. Perfect for building production-ready Chrome extensions with best practices.
https://github.com/sujalxplores/chrome-seed

biomejs chrome-extension chrome-mv3 developer-tools modern-tooling production-ready react19 tailwindcss typescript vite web-extension

Last synced: 6 months ago
JSON representation

A blazing-fast Chrome extension boilerplate with React 19, TypeScript, and Vite. Features modern development tools like Biome for linting, Tailwind CSS for styling, and GitHub Actions for CI/CD. Perfect for building production-ready Chrome extensions with best practices.

• Host: GitHub
• URL: https://github.com/sujalxplores/chrome-seed
• Owner: SujalXplores
• License: mit
• Created: 2025-01-04T12:24:34.000Z (9 months ago)
• Default Branch: main
• Last Pushed: 2025-01-04T12:24:38.000Z (9 months ago)
• Last Synced: 2025-04-23T12:04:34.237Z (6 months ago)
• Topics: biomejs, chrome-extension, chrome-mv3, developer-tools, modern-tooling, production-ready, react19, tailwindcss, typescript, vite, web-extension
• Language: TypeScript
• Homepage:
• Size: 37.1 KB
• Stars: 2
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

          
# Chrome Seed 🌱 - Blazing fast Chrome extension boilerplate

A modern, feature-rich boilerplate for building Chrome extensions. It combines the best tools and practices to help you create powerful extensions quickly and efficiently.

[![TypeScript](https://img.shields.io/badge/TypeScript-007ACC?style=for-the-badge&logo=typescript&logoColor=white)](https://www.typescriptlang.org/)

[![React](https://img.shields.io/badge/React-20232A?style=for-the-badge&logo=react&logoColor=61DAFB)](https://reactjs.org/)

[![Vite](https://img.shields.io/badge/Vite-646CFF?style=for-the-badge&logo=vite&logoColor=white)](https://vitejs.dev/)

[![Tailwind CSS](https://img.shields.io/badge/Tailwind_CSS-38B2AC?style=for-the-badge&logo=tailwind-css&logoColor=white)](https://tailwindcss.com/)

## ✨ Features

- 🎯 **TypeScript** - First-class type safety

- ⚛️ **React 19** - Modern UI development

- ⚡ **Vite** - Lightning-fast builds

- 🎨 **Tailwind CSS** - Utility-first styling

- 🔍 **Biome** - Next-gen linting & formatting

- 📦 **PostCSS** - Modern CSS features

- 🧪 **Production-ready** - Optimized build setup

- 📝 **Well-documented** - Comprehensive guides

## 🚀 Getting Started

### Prerequisites

- Node.js ≥ 22.12.0

- pnpm (recommended) or npm

### Quick Start

1. **Clone the Repository**

   ```bash

   git clone https://github.com/yourusername/chrome-seed.git

   cd chrome-seed

   ```

2. **Install Dependencies**

   ```bash

   pnpm install

   ```

3. **Start Development**

   ```bash

   pnpm dev

   ```

## 🛠️ Development

### Available Scripts

| Command | Description |

|---------|-------------|

| `pnpm dev` | Start development server |

| `pnpm build` | Build for production |

| `pnpm preview` | Preview production build |

| `pnpm lint` | Lint code with Biome |

| `pnpm format` | Format code with Biome |

| `pnpm type-check` | Run TypeScript checks |

| `pnpm package` | Create distribution package |

### 🔌 Loading the Extension

1. Open Chrome and navigate to `chrome://extensions`

2. Enable "Developer mode" in the top right

3. Click "Load unpacked" and select the `dist` directory

## 🏭 Production Build

Our optimized build process:

1. 🧹 Cleans output directories

3. 📝 Compiles TypeScript

4. 📦 Bundles and minifies with Vite

## 🤝 Contributing

We welcome contributions! Here's how you can help:

1. Fork the repository

2. Create your feature branch (`git checkout -b feature/amazing-feature`)

3. Commit your changes (`git commit -m 'Add amazing feature'`)

4. Push to the branch (`git push origin feature/amazing-feature`)

5. Open a Pull Request

## 📄 License

This project is licensed under the MIT License - see the [LICENSE](LICENSE) file for details.