/focus-tomato

WIP

Primary LanguageTypeScriptMIT LicenseMIT

logo

Chrome Extension Boilerplate with
React + Vite + TypeScript

GitHub action badge hits

This project is listed in the 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. 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.

Screenshots

New Tab

Popup

popup

Examples

Documents

Star History

Star History Chart

Contributors

JunyWuuuu91
JunyWuuuu91

πŸ’»
dim0147
dim0147

πŸ›
jon lepage
jon lepage

πŸ›
LironH
LironH

πŸ€”
Spencer Chang
Spencer Chang

πŸ›
deld123
deld123

πŸ›
Michal Hantl
Michal Hantl

πŸ€” πŸ›
Jordan Burgess
Jordan Burgess

πŸ€”
NAMEUN CHO
NAMEUN CHO

πŸ›
Andrew Mudrov
Andrew Mudrov

πŸ’¬
Shubham Lad
Shubham Lad

πŸ›
hanrong
hanrong

πŸ›
Florian KΓΆnig
Florian KΓΆnig

πŸ’¬
Tran Phong
Tran Phong

πŸ›
tonychandesign
tonychandesign

πŸ›
Ihor Makarchuk
Ihor Makarchuk

πŸ›
hugoobauer
hugoobauer

πŸ›
Karan Singh
Karan Singh

πŸ€”
remusris
remusris

πŸ€”
hegel_dark
hegel_dark

πŸ€”
Jingsi
Jingsi

πŸ› πŸ’»
Chris Ozgo
Chris Ozgo

πŸ›
Cong
Cong

πŸ›
PatrykKuniczak
PatrykKuniczak

πŸ€” πŸ’» πŸ“–
Hector Parra
Hector Parra

πŸ›
JeongHyeon Kim
JeongHyeon Kim

πŸš‡
Terminels
Terminels

πŸ’»

Thanks To

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

Jonghakseo