Chrome Extension Vite Shadcn UI Starter 🚀

A modern, TypeScript-powered Chrome extension starter with React and Shadcn/UI

🚀 Introduction

A comprehensive boilerplate for building and Chrome extensions with Vite and Shadcn/UI. This template provides a solid foundation for creating robust, type-safe applications with modern testing practices.

✨ Features

• React Chrome Extension with TypeScript
• Full Tailwind CSS and Shadcn/UI support
• Vite for lightning-fast development
• ESLint and Prettier setup
• CI/CD ready configuration

📁 Project Structure

├── src/ # Source files
│ ├── assets/ # Images and static assets
│ ├── components/ # React components
│ │ └── ui/ # UI components
│ ├── lib/ # Utility functions
│ │ └── utils.ts # Helper utilities
│ ├── App.tsx # Main App component
│ ├── App.css # App styles
│ └── main.tsx # Entry point
├── public/ # Static assets and manifest.json
├── vite.config.ts # Vite configuration
├── tsconfig.json # TypeScript configuration
├── tailwind.config.js # Tailwind CSS configuration
├── postcss.config.js # PostCSS configuration
└── package.json # Project dependencies and scripts

🛠️ Getting Started

Prerequisites

• Node.js (v18+)
• npm or yarn
• Git

Setup

1. Clone the repository:

git clone https://github.com/tooniez/chrome-extension-vite-shadcn-framer.git
cd chrome-extension-vite-shadcn-framer

npm install
or
yarn install

Development

Start the development server:

npm run dev
or
yarn dev

Deployment

Build and install the extension:

npm run build

Load the unpacked extension in Chrome:

chrome://extensions/

🤝 Contributing

Contributions are welcome! Please read our Contributing Guide for details on our code of conduct and the process for submitting pull requests.

📝 License

Copyright © 2024 tooniez. This project is MIT licensed.