Skip to content

Get started with building your Chrome extension effortlessly! Our starter kit combines the power of cutting-edge technologies like Vite, TypeScript, React, CRX, Tailwind CSS, and DaisyUI, making extension development a breeze.

Notifications You must be signed in to change notification settings

rezasohrabi/chrome-ext-starter

Repository files navigation

🚀 Chrome Extension Starter Kit

See my RealWorld Demo using this starter

Get started with building your dream Chrome extension effortlessly! Our starter kit combines the power of cutting-edge technologies like Vite, TypeScript, React, CRX, Tailwind CSS, and DaisyUI, making extension development a breeze.

Why choose this template? 🤔 Well, there are countless templates out there, but if you're eyeing Tailwind for your Chrome extension, you're in luck! 🎉 With this template, diving into extension development becomes a breeze – no configuration needed! 💻

Key Features

  • 🛠️ Vite: for lightning-fast development and hot module replacement.
  • 🧰 TypeScript: for type safety and enhanced productivity.
  • ⚛️ React: for building dynamic and interactive UI components.
  • 📦 CRX: for easy packaging and distribution of your extension.
  • 🎨 Tailwind CSS: for hassle-free styling, including seamless integration in content scripts.
  • 🌼 DaisyUI: for beautiful and customizable UI elements right out of the box.
  • 🌐 Cross-browser: run on Chrome, Edge, Brave, and Firefox with one codebase.

Why Choose Our Starter Kit?

  • 🚀 Streamlined Setup: Say goodbye to configuration headaches. Get up and running in minutes.
  • Optimized Performance: Leverage Vite's speed and Tailwind CSS's efficiency for blazing-fast development.
  • 👩‍💻 Developer-Friendly: TypeScript support and React components empower developers to build feature-rich extensions with ease.
  • 🌍 Cross-Browser Ready: Tested paths for Chrome-family and Firefox so you can ship confidently.

🚀 Get Started

  • 1️⃣ Clone the repo: git clone https://github.com/rezasohrabi/chrome-ext-starter.git
  • 2️⃣ Install dependencies: pnpm install
  • 3️⃣ Start development (Chrome): pnpm dev
  • 4️⃣ Start development (Firefox): pnpm dev:firefox
  • 5️⃣ Build for production (Chrome): pnpm build
  • 6️⃣ Build for production (Firefox): pnpm build:firefox

🤝 How to Contribute

We welcome and appreciate contributions to improve this project. Whether you would like to fix a bug, introduce a new feature, or enhance the documentation, your contributions are highly valued.

Browser Support

New in v1.2: Firefox support is here! 🎉 Build once, run across the major browsers.

Supported browsers (min version)
🟡 Chrome 88+; 🟦 Edge 88+; 🦁 Brave 88+; 🦊 Firefox 109+

About

Get started with building your Chrome extension effortlessly! Our starter kit combines the power of cutting-edge technologies like Vite, TypeScript, React, CRX, Tailwind CSS, and DaisyUI, making extension development a breeze.

Topics

Resources

Code of conduct

Contributing

Stars

Watchers

Forks

Packages

No packages published

Contributors 3

  •  
  •  
  •