August 14, 2023

Chrome Extension Boilerplate with React + Vite + Typescript

logo

Chrome Extension Boilerplate with
React + Vite + TypeScript

![](https://img.shields.io/badge/React-61DAFB?style=flat-square&logo=react&logoColor=black) ![](https://img.shields.io/badge/Typescript-3178C6?style=flat-square&logo=typescript&logoColor=white) ![](https://badges.aleen42.com/src/vitejs.svg) ![GitHub action badge](https://github.com/Jonghakseo/chrome-extension-boilerplate-react-vite/actions/workflows/build-zip.yml/badge.svg) hits > This project is listed in the [Awesome Vite](https://github.com/vitejs/awesome-vite)

Table of Contents

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

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

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

Star History

Star History Chart


Thanks To

| Jetbrains | Jackson Hong | |--------------------------------------------------------------------------------------------------------------------------------------------|--------------------------------------------------------------------------------------------------| | JetBrains Logo (Main) logo. | Jackson Hong |


Jonghakseo