https://github.com/korbinzhao/chrome-extension-performance

Last synced: 24 days ago
JSON representation

Host: GitHub
URL: https://github.com/korbinzhao/chrome-extension-performance
Owner: korbinzhao
License: mit
Created: 2024-06-24T12:46:05.000Z (11 months ago)
Default Branch: main
Last Pushed: 2024-09-16T16:38:15.000Z (8 months ago)
Last Synced: 2025-04-30T07:02:56.974Z (25 days ago)
Language: TypeScript
Size: 1.61 MB
Stars: 0
Watchers: 1
Forks: 0
Open Issues: 5
Metadata Files:
- Readme: README.md
- Funding: .github/FUNDING.yml
- License: LICENSE
- Codeowners: .github/CODEOWNERS

Awesome Lists containing this project

README

        




 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)



> This boilerplate

> has [Legacy version](https://github.com/Jonghakseo/chrome-extension-boilerplate-react-vite/tree/legacy)



> [!TIP]

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

> [!IMPORTANT]

> Share storage state between every page

>

> https://github.com/Jonghakseo/chrome-extension-boilerplate-react-vite/assets/53500778/1992e46c-032a-4743-bbd2-c421757517d7

## Table of Contents

- [Intro](#intro)

- [Features](#features)

- [Structure](#structure)

    - [ChromeExtension](#chrome-extension)

    - [Packages](#packages)

    - [Pages](#pages)

- [Install](#install)

    - [Procedures](#procedures)

        - [Chrome](#chrome)

        - [Firefox](#firefox)

- [Reference](#reference)

- [Star History](#starhistory)

- [Contributors](#contributors)

## 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(Rollup) & Turborepo.

## Features 

- [React18](https://reactjs.org/)

- [TypeScript](https://www.typescriptlang.org/)

- [Tailwindcss](https://tailwindcss.com/)

- [Vite](https://vitejs.dev/)

- [Turborepo](https://turbo.build/repo)

- [Prettier](https://prettier.io/)

- [ESLint](https://eslint.org/)

- [Chrome Extension Manifest Version 3](https://developer.chrome.com/docs/extensions/mv3/intro/)

- Custom HMR(Hot Module Rebuild) Plugin

## Install 

## Procedures: 

1. Clone this repository.

2. Change `extensionDescription` and `extensionName` in `messages.json` file.

3. Install pnpm globally: `npm install -g pnpm` (check your node version >= 18.12.0)

4. Run `pnpm install`

## And next, depending on the needs:

### For Chrome: 

1. Run:

    - Dev: `pnpm dev`

      - When you run with Windows, you should run as

        administrator. [(Issue#456)](https://github.com/Jonghakseo/chrome-extension-boilerplate-react-vite/issues/456)

    - Prod: `pnpm build`

2. Open in browser - `chrome://extensions`

3. Check - `Developer mode`

4. Find and Click - `Load unpacked extension`

5. Select - `dist` folder at root

### For Firefox: 

1. Run:

    - Dev: `pnpm dev:firefox`

    - Prod: `pnpm 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 at root

### 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.

## Structure 

### ChromeExtension 

Main app with background script, manifest

- `manifest.js` - manifest for chrome extension

- `lib/background` - [background script](https://developer.chrome.com/docs/extensions/mv3/background_pages/) for chrome

  extension (`background.service_worker` in

  manifest.json)

- `public/content.css` - content css for user's page injection

### Packages 

Some shared packages

- `dev-utils` - utils for chrome extension development (manifest-parser, logger)

- `hmr` - custom HMR plugin for vite, injection script for reload/refresh, hmr dev-server

- `shared` - shared code for entire project. (types, constants, custom hooks, components, etc.)

- `tsconfig` - shared tsconfig for entire project.

### Pages 

- `content` - [content script](https://developer.chrome.com/docs/extensions/mv3/content_scripts/) for chrome

  extension (`content_scripts` in manifest.json)

- `content-ui` - [content script](https://developer.chrome.com/docs/extensions/mv3/content_scripts/) for render UI in

  user's page (`content_scripts` in manifest.json)

- `devtools` - [devtools](https://developer.chrome.com/docs/extensions/mv3/devtools/#creating) for chrome

  extension (`devtools_page` in manifest.json)

- `devtools-panel` - devtools panel for [devtools](pages/devtools/src/index.ts)

- `newtab` - [new tab](https://developer.chrome.com/docs/extensions/mv3/override/) for chrome

  extension (`chrome_url_overrides.newtab` in

  manifest.json)

- `options` - [options](https://developer.chrome.com/docs/extensions/mv3/options/) for chrome extension (`options_page`

  in manifest.json)

- `popup` - [popup](https://developer.chrome.com/docs/extensions/reference/browserAction/) for chrome

  extension (`action.default_popup` in

  manifest.json)

- `sidepanel` - [sidepanel(Chrome 114+)](https://developer.chrome.com/docs/extensions/reference/sidePanel/) for chrome

  extension (`side_panel.default_path` in manifest.json)

## Reference 

- [Vite Plugin](https://vitejs.dev/guide/api-plugin.html)

- [ChromeExtension](https://developer.chrome.com/docs/extensions/mv3/)

- [Rollup](https://rollupjs.org/guide/en/)

- [Turborepo](https://turbo.build/repo/docs)

- [Rollup-plugin-chrome-extension](https://www.extend-chrome.dev/rollup-plugin)

## Star History 

[![Star History Chart](https://api.star-history.com/svg?repos=Jonghakseo/chrome-extension-boilerplate-react-vite&type=Date)](https://star-history.com/#Jonghakseo/chrome-extension-boilerplate-react-vite&Date)

## Contributors 

This Boilerplate is made possible thanks to all of its contributors.



  



---

## Special Thanks To

|  |  |

|-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|--------------------------------------------------------------------------------------------------------------------------------------------------------------------------|

---

Made by [Jonghakseo](https://nookpi.tistory.com/)