Chrome Extension Boilerplate with
React + Vite + TypeScript

This project is listed in the Awesome Vite

Table of Contents

• Intro
• Features
• Installation
  • Procedures
    • Chrome
    • Firefox
• Screenshots
  • NewTab
  • Popup
  • Devtools
• Examples
• 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
• Prettier
• ESLint
• Husky
• Commitlint
• Conventional Commits
• Chrome Extension Manifest Version 3
• HRR(Hot Rebuild & Refresh/Reload)

Installation

Procedures:

1. Clone this repository.
2. Change name and description in package.json => Auto synchronize with manifest
3. Install pnpm globally: npm install -g pnpm (check your node version >= 16.6, recommended >= 18)
4. Run pnpm install

And next, depending on the needs:

For Chrome:

1. Run:
   • Dev: pnpm dev or npm run dev
   • Prod: pnpm 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

For Firefox:

1. Run:
   • Dev: pnpm dev:firefox or npm run dev:firefox
   • Prod: pnpm 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

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.

Screenshots

New Tab

Popup

Black	White

Devtools

Examples

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

Documents

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

Star History

Contributors

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 🚇	Terminels 💻	WonkyDD 💻 🐛

---

Thanks To

Jetbrains	Jackson Hong

---

Jonghakseo