Chrome Extension Boilerplate withReact + Vite + TypeScript

This project is listed in the Awesome Vite

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
• Vite
• SASS
• ESLint
• Prettier
• Chrome Extension Manifest Version 3

Installation

Procedures

1. Clone this repository.
2. Change name and description in package.json => Auto synchronize with manifest
3. Run yarn or npm i (check your node version >= 16)
4. Run yarn dev or npm run dev
5. Load Extension on Chrome
   1. Open – Chrome browser
   2. Access – chrome://extensions
   3. Check – Developer mode
   4. Find – Load unpacked extension
   5. Select – dist folder in this project (after dev or build)
6. If you want to build in production, Just run yarn build or npm run build.

Attention

• Html files in the public folder are automatically copied from inside the src/pages folder. So, if you want to edit the html template file, edit index.html in each page folder.

Screenshots

New Tab

Popup

Documents

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

GitHub

View Github