Chrome Extension Boilerplate with
React + Vite + TypeScript

This project is listed in the Awesome Vite

• Intro
• Features
• Installation
  • Procedures
    • Chrome
    • Firefox
• Screenshots
  • NewTab
  • Popup
• Examples
• Documents

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
• Twind
• ESLint
• Prettier
• Chrome Extension Manifest Version 3
• HRR(Hot Rebuild & Refresh/Reload)

1. Clone this repository.
2. Change name and description in package.json => Auto synchronize with manifest
3. Run yarn install or npm i (check your node version >= 16.6, recommended >= 18)

1. Run:
   • Dev: yarn dev or npm run dev
   • Prod: yarn build or npm run build
2. Open in browser - chrome://extensions
3. Check - Developer mode
4. Find and Click - Load unpacked extension
5. Select - dist folder

1. Run:
   • Dev: yarn dev:firefox or npm run dev:firefox
   • Prod: yarn build:firefox or npm run build:firefox
2. Open in browser - about:debugging#/runtime/this-firefox
3. Find and Click - Load Temporary Add-on...
4. Select - manifest.json from dist folder

• https://github.com/Jonghakseo/drag-gpt-extension
• https://github.com/Jonghakseo/pr-commit-noti
• https://github.com/ariburaco/chatgpt-file-uploader-extended

• Vite Plugin
• ChromeExtension
• Rollup
• Rollup-plugin-chrome-extension

JunyWuuuu91 💻	dim0147 🐛	jon lepage 🐛	LironH 🤔	Spencer Chang 🐛	deld123 🐛	Michal Hantl 🤔 🐛
Jordan Burgess 🤔	NAMEUN CHO 🐛	Andrew Mudrov 💬	Shubham Lad 🐛	hanrong 🐛	Florian König 💬	Tran Phong 🐛
tonychandesign 🐛	Ihor Makarchuk 🐛	hugoobauer 🐛	Karan Singh 🤔	remusris 🤔	hegel_dark 🤔	Jingsi 🐛 💻
Chris Ozgo 🐛	Cong 🐛	PatrykKuniczak 🤔 💻 📖	Hector Parra 🐛	JeongHyeon Kim 🚇

Jetbrains	Jackson Hong

Jonghakseo