Chrome Extension Boilerplate with
React + Vite + TypeScript

    > This project is listed in the [Awesome Vite](https://github.com/vitejs/awesome-vite)

Table of Contents

• Intro
• Features
• Installation
• Procedures
• 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
• Tailwind CSS
• 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)
4. Run yarn dev or npm run dev
5. Load Extension on Chrome
6. Open - Chrome browser
7. Access - chrome://extensions
8. Check - Developer mode
9. Find - Load unpacked extension
10. Select - dist folder in this project (after dev or build)
11. If you want to build in production, Just run yarn build or npm run build.

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

View Github