https://github.com/5tigerjelly/chrome-extension-react-template
Ready to use Chrome extension template with React Typescript + Vite
https://github.com/5tigerjelly/chrome-extension-react-template
chrome-extension react reactjs vite vitejs
Last synced: 5 months ago
JSON representation
Ready to use Chrome extension template with React Typescript + Vite
- Host: GitHub
- URL: https://github.com/5tigerjelly/chrome-extension-react-template
- Owner: 5tigerjelly
- Created: 2024-07-07T02:46:05.000Z (almost 2 years ago)
- Default Branch: main
- Last Pushed: 2025-09-01T04:58:16.000Z (10 months ago)
- Last Synced: 2025-09-01T07:06:45.395Z (10 months ago)
- Topics: chrome-extension, react, reactjs, vite, vitejs
- Language: TypeScript
- Homepage:
- Size: 26.4 KB
- Stars: 152
- Watchers: 1
- Forks: 55
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# React Chrome Extension Template
This is a template for creating a Chrome extension using React and [Vite](https://vitejs.dev/) with TypeScript.
## Getting Started
### Prerequisites
Make sure you have [Node.js](https://nodejs.org/) (version 18+ or 20+) installed on your machine.
### Setup
1. Clone or fork the repository :
```sh
# To clone
git clone https://github.com/5tigerjelly/chrome-extension-react-template
cd chrome-extension-react-template
```
2. Install the dependencies:
```sh
npm install
```
## 🏗️ Development
To start the development server:
```sh
npm run dev
```
This will start the Vite development server and open your default browser.
## 📦 Build
To create a production build:
```sh
npm run build
```
This will generate the build files in the `build` directory.
## 📂 Load Extension in Chrome
1. Open Chrome and navigate to `chrome://extensions/`.
2. Enable "Developer mode" using the toggle switch in the top right corner.
3. Click "Load unpacked" and select the `build` directory.
Your React app should now be loaded as a Chrome extension!
## 🗂️ Project Structure
- `public/`: Contains static files and the `manifest.json`.
- `src/`: Contains the React app source code.
- `vite.config.ts`: Vite configuration file.
- `tsconfig.json`: TypeScript configuration file.
- `package.json`: Contains the project dependencies and scripts.
## License
This project is licensed under the MIT License.