chrome-extension-boilerplate-react-vite
chrome-extension-boilerplate-react-vite copied to clipboard
Chrome Extension Boilerplate with React + Vite + Typescript
![logo](https://github.com/Jonghakseo/chrome-extension-boilerplate-react-vite/raw/main/public/icon-128.png)
Chrome Extension Boilerplate with
React + Vite + TypeScript
This project is listed in the Awesome Vite
Table of Contents
- Intro
- Features
-
Installation
- Procedures
-
Screenshots
- NewTab
- Popup
- Documents
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
- ESLint
- Prettier
- Chrome Extension Manifest Version 3
Installation
Procedures
- Clone this repository.
- Change
name
anddescription
in package.json => Auto synchronize with manifest - Run
yarn
ornpm i
(check your node version >= 16) - 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
![스크린샷 2022-04-11 오전 2 22 00](https://user-images.githubusercontent.com/53500778/162631646-cd40976b-b737-43d0-8e6a-6ac090a2e2d4.png)
Popup
![스크린샷 2022-04-11 오전 2 22 11](https://user-images.githubusercontent.com/53500778/162631660-d35c5f12-e0d7-4431-a020-97024cdda7a7.png)
Documents
Thanks To
Jetbrains | Jackson Hong |
---|---|
![]() |