https://github.com/timelessco/react-vite-chrome-extension
Boilerplate for creating a Google Chrome Extension with React + TypeScript + Vitejs + TailwindCSS.
https://github.com/timelessco/react-vite-chrome-extension
chrome-extension chrome-extension-starter reactjs tailwindcss typescript vite
Last synced: 5 months ago
JSON representation
Boilerplate for creating a Google Chrome Extension with React + TypeScript + Vitejs + TailwindCSS.
- Host: GitHub
- URL: https://github.com/timelessco/react-vite-chrome-extension
- Owner: timelessco
- License: mit
- Created: 2022-07-28T06:05:24.000Z (almost 4 years ago)
- Default Branch: main
- Last Pushed: 2023-12-20T07:31:35.000Z (over 2 years ago)
- Last Synced: 2024-04-13T22:59:44.583Z (about 2 years ago)
- Topics: chrome-extension, chrome-extension-starter, reactjs, tailwindcss, typescript, vite
- Language: TypeScript
- Homepage:
- Size: 610 KB
- Stars: 33
- Watchers: 4
- Forks: 4
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# React TypeScript + Vite Chrome Extension Starter
This project is a boilerplate for creating a Google Chrome Extension with React + Vitejs + TailwindCSS + TypeScript.
- [React](https://reactjs.org/)
- [Vite](https://vitejs.dev/)
- [Tailwind CSS](https://tailwindcss.com/)
- [TypeScript](https://www.typescriptlang.org/)
## :bulb: Preview
## :package: Requirements
- Nodejs v18+ LTS
## :atom_symbol: Development
- Clone this repository
```
git clone https://github.com/timelessco/react-vite-chrome-extension
```
- Install dependencies
```
pnpm install
```
- Start Development Server
```
pnpm dev
```
## :computer: Production
- Building the chrome extension for production
```
pnpm build
```
## :rocket: Usage
- You can find the chrome extension contents in the `dist` folder
- Open `chrome://extension` and turn on Developer Mode.
- Click the `Load unpacked extension` button.
- Now, select the `dist` folder.
- Your extension is ready to use.
### :hamburger: Additional Details
- This boilerplate can be extended even further using [Chrome Extension APIs](https://developer.chrome.com/docs/extensions/reference/)
- You can use [Content Scripts](https://developer.chrome.com/docs/extensions/mv3/content_scripts/) to inject content into the page or accessing the DOM conent.
- By using the [Message Passing](https://developer.chrome.com/extensions/messaging) API, you can communicate with the content script and the popup.
## :green_heart: Message
I hope you find this useful. If you have any questions, please create an issue.
## :mortar_board: License
- MIT