
Chrome Extension Boilerplate with
React + Vite + TypeScript




Table of Contents
Intro
This boilerplate is made for creating chrome extensions using React and Typescript.
The focus was on improving the build speed and development experience with Vite.
Features
- React 18
- TypeScript
- Jest
- React Testing Library
- Vite
- SASS
- Tailwind CSS
- ESLint
- Prettier
- Chrome Extension Manifest Version 3
- HRR(Hot Rebuild & Refresh/Reload)
Installation
Procedures
- Clone this repository.
- Change
name
anddescription
in package.json => Auto synchronize with manifest - Run
yarn install
ornpm i
(check your node version >= 16.6, recommended >= 18) - Run
yarn dev
ornpm run dev
- Load Extension on Chrome
- Open - Chrome browser
- Access - chrome://extensions
- Check - Developer mode
- Find - Load unpacked extension
- Select -
dist
folder in this project (after dev or build) - If you want to build in production, Just run
yarn build
ornpm run build
.
Screenshots
New Tab
Popup
Examples
- https://github.com/Jonghakseo/drag-gpt-extension
- https://github.com/Jonghakseo/pr-commit-noti
- https://github.com/ariburaco/chatgpt-file-uploader-extended
Documents
Star History
Thanks To
| Jetbrains | Jackson Hong |
|--------------------------------------------------------------------------------------------------------------------------------------------|--------------------------------------------------------------------------------------------------|
| |
|