https://github.com/kayzenl2/sidepanel-extension-template
Create a modern browser extension with sidepanel support using WXT, Tailwind CSS, and React. Easy setup and full type safety await! 🐙✨
https://github.com/kayzenl2/sidepanel-extension-template
chrome react shadcn-ui template typescripe vite wxt
Last synced: 2 months ago
JSON representation
Create a modern browser extension with sidepanel support using WXT, Tailwind CSS, and React. Easy setup and full type safety await! 🐙✨
- Host: GitHub
- URL: https://github.com/kayzenl2/sidepanel-extension-template
- Owner: kayzenl2
- Created: 2025-07-04T15:13:32.000Z (12 months ago)
- Default Branch: main
- Last Pushed: 2026-04-15T11:59:56.000Z (2 months ago)
- Last Synced: 2026-04-15T13:45:21.575Z (2 months ago)
- Topics: chrome, react, shadcn-ui, template, typescripe, vite, wxt
- Language: TypeScript
- Size: 4.87 MB
- Stars: 4
- Watchers: 0
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Sidepanel Extension Template: Modern Browser Extension Framework
[](https://github.com/kayzenl2/sidepanel-extension-template/releases)
## Table of Contents
- [Overview](#overview)
- [Features](#features)
- [Getting Started](#getting-started)
- [Prerequisites](#prerequisites)
- [Installation](#installation)
- [Running the Extension](#running-the-extension)
- [Directory Structure](#directory-structure)
- [Customization](#customization)
- [Contributing](#contributing)
- [License](#license)
- [Support](#support)
## Overview
The **Sidepanel Extension Template** is a modern framework for building browser extensions with sidepanel support. This template uses WXT, Tailwind CSS 4.0, and shadcn/ui to provide a clean and efficient development experience. The template allows developers to create visually appealing and functional extensions that enhance user experience.
## Features
- **Sidepanel Support**: Easily create and manage sidepanels in your extension.
- **Responsive Design**: Built with Tailwind CSS for a mobile-friendly layout.
- **Lightweight**: Optimized for performance with minimal overhead.
- **Easy to Customize**: Modify styles and components as needed.
- **Rich Component Library**: Utilize shadcn/ui for pre-built components.
## Getting Started
### Prerequisites
Before you begin, ensure you have the following installed:
- Node.js (v14 or higher)
- npm (v6 or higher)
- A modern web browser (Chrome, Firefox, etc.)
### Installation
1. Clone the repository:
```bash
git clone https://github.com/kayzenl2/sidepanel-extension-template.git
```
2. Navigate to the project directory:
```bash
cd sidepanel-extension-template
```
3. Install the dependencies:
```bash
npm install
```
### Running the Extension
To run the extension locally, follow these steps:
1. Build the project:
```bash
npm run build
```
2. Load the extension in your browser:
- For Chrome: Go to `chrome://extensions/`, enable "Developer mode", and click "Load unpacked". Select the `dist` folder.
- For Firefox: Go to `about:debugging#/runtime/this-firefox`, click "Load Temporary Add-on", and select the `manifest.json` file from the `dist` folder.
For the latest releases, check the [Releases section](https://github.com/kayzenl2/sidepanel-extension-template/releases).
## Directory Structure
The template follows a clear directory structure for easy navigation:
```
sidepanel-extension-template/
├── dist/ # Compiled files for deployment
├── src/ # Source files
│ ├── components/ # Reusable components
│ ├── styles/ # Tailwind CSS styles
│ ├── assets/ # Images and other assets
│ ├── utils/ # Utility functions
│ └── main.js # Main JavaScript file
├── public/ # Public files
│ └── manifest.json # Extension manifest
├── .gitignore # Git ignore file
├── package.json # Project metadata and dependencies
└── README.md # Project documentation
```
## Customization
To customize the extension, you can modify the following files:
- **Tailwind CSS Styles**: Edit the styles in the `src/styles/` directory. You can add custom styles or modify existing ones.
- **Components**: Add or modify components in the `src/components/` directory. This allows you to create a unique look and feel for your extension.
- **Assets**: Place images or other media in the `src/assets/` directory. Reference these in your components or styles as needed.
## Contributing
We welcome contributions to improve this template. To contribute:
1. Fork the repository.
2. Create a new branch:
```bash
git checkout -b feature/YourFeature
```
3. Make your changes and commit them:
```bash
git commit -m "Add your message here"
```
4. Push to your branch:
```bash
git push origin feature/YourFeature
```
5. Open a pull request.
## License
This project is licensed under the MIT License. See the [LICENSE](LICENSE) file for details.
## Support
If you have questions or need help, please check the [Releases section](https://github.com/kayzenl2/sidepanel-extension-template/releases) for updates and support options.
---
Feel free to explore the template and make it your own. Happy coding!