Chrome/FireFox Vite-React w/ tailwindcss Extension Template

A basic extension template to fork and build from, using Vite, React, and Tailwind CSS, created by LordCat and AtlasWiki/mrunoriginal. Comes with three UI templates - developer tools tab/panel, extension popup, and accessible webpage through chrome-extension url.

https://github.com/user-attachments/assets/216ab206-27f3-402d-8153-8c05458f431d

Key Features

• Accessbility - Accessible in the extension popup, devtools, and chrome-extension url as a webpage.
• Modularity - Comes with an organized structure that can be expand upon.
• Routing - Includes page routing/navigation throgh react components.
• Easy Template Use - Allows you to use reactjs, tailwindcss, and even expand this simple structure, simplifying the intial extension set up allowing you to focus on building your extension!
• Typescript Support - Prefer your type definitions at compile time? Typescript support included.

Getting Started

Prerequisites

• Node.js and npm installed on your system

Clone the Repository

git clone https://github.com/LordCat/PlaceHolder-Extension.git
cd PlaceHolder-Extension

Install Dependencies

npm install

Build the Project

npm run build

Load the Extension

1. Open your Chrome-based web browser
2. Go to the Extensions page (chrome://extensions)
3. Enable "Developer mode" (top right corner)
4. Click "Load unpacked"
5. Select the dist folder in your project directory

Resources

• Chrome Extension Documentation
• Vite Documentation
• React Documentation
• Tailwind CSS Documentation

License

This project is licensed under the MIT License - see the LICENSE.md file for details.