This project is listed in the Awesome Vite
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.
- React 18
- TypeScript
- Jest
- React Testing Library
- Vite
- SASS
- Prettier
- ESLint
- Husky
- Commitlint
- Conventional Commits
- Chrome Extension Manifest Version 3
- HRR(Hot Rebuild & Refresh/Reload)
- Clone this repository.
- Change
name
anddescription
in package.json => Auto synchronize with manifest - Install pnpm globally:
npm install -g pnpm
(check your node version >= 16.6, recommended >= 18) - Run
pnpm install
- Run:
- Dev:
pnpm dev
ornpm run dev
- Prod:
pnpm build
ornpm run build
- Dev:
- Open in browser -
chrome://extensions
- Check -
Developer mode
- Find and Click -
Load unpacked extension
- Select -
dist
folder
- Run:
- Dev:
pnpm dev:firefox
ornpm run dev:firefox
- Prod:
pnpm build:firefox
ornpm run build:firefox
- Dev:
- Open in browser -
about:debugging#/runtime/this-firefox
- Find and Click -
Load Temporary Add-on...
- Select -
manifest.json
fromdist
folder
Remember in firefox you add plugin in temporary mode, that's mean it's disappear after close browser, you must do it again, on next launch.
Black | White |
---|---|
- https://github.com/Jonghakseo/drag-gpt-extension
- https://github.com/Jonghakseo/pr-commit-noti
- https://github.com/ariburaco/chatgpt-file-uploader-extended
Jetbrains | Jackson Hong |
---|---|