create-vextro

Scaffold a modern Chrome extension powered by Vite + React + Tailwind in seconds.

Vextro is a starter toolkit designed for building fast, modern Chrome extensions using:

• ⚡ Vite
• ⚛️ React + TypeScript
• 🎨 Tailwind CSS
• 🧩 Manifest V3
• 🔌 CRXJS Vite Plugin

---

🚀 Getting Started

You can scaffold a new extension using one of the following commands:

With npm

npm create vextro@latest

With Yarn

yarn create vextro

With pnpm

pnpm create vextro

With Bun

bun create vextro

Then follow the prompt to choose your project name:

cd my-extension
npm install
npm run dev

Finally, open Chrome and load your extension from the dist/ folder via chrome://extensions.

---

📁 Example Folder Structure

my-extension/
├── public/                 # Static assets (optional)
├── src/
│   ├── background/         # Background service worker
│   ├── content/            # Content scripts
│   ├── options/            # Options page (React + Tailwind)
│   ├── popup/              # Popup UI (React + Tailwind)
│   ├── manifest.ts         # Typed manifest config
│   ├── styles.css          # Tailwind CSS entrypoint
│   └── utils/              # Utility scripts
├── vite.config.ts          # Vite + CRX plugin config
├── tsconfig.json
└── package.json

---

🌟 Features

• ⚡ Instant startup with Vite
• 🔥 Hot Module Reload (HMR) for popup and options
• 🧩 Multi-entry support with @crxjs/vite-plugin
• 🛠️ Preconfigured React + TypeScript + Tailwind
• 🧱 Opinionated folder structure

---

📄 License

MIT © Lasantha Lakmal