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
• 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
• Twind
• ESLint
• Prettier
• 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. Run yarn install or npm i (check your node version >= 16.6, recommended >= 18)

And next, depending on the needs:

For Chrome:

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

For Firefox:

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

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

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

---

Thanks To

Jetbrains	Jackson Hong

---

Jonghakseo