This project is generated by the boilerplate https://github.com/Jonghakseo/chrome-extension-boilerplate-react-vite

Below is part of the readme of the boilerplate for my reference.

Table of Contents

• Features
• Installation
  • Procedures
  • Chrome
  • Firefox
• Pages
• Examples
• Documents

Features

• React 18
• TypeScript
• Jest
• React Testing Library
• Vite
• SASS
• Twind
• 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.

Pages

New Tab

Override Chrome pages
chrome_url_overrides.newtab in manifest.json

Popup

Browser actions
action.default_popup in manifest.json

Devtools

Devtools
devtools_page in manifest.json

Background

Background
background.service_worker in manifest.json

ContentScript

Content Script
content_scripts[0] in manifest.json

Options

Options
options_page in manifest.json

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