@shoplflow/extension v0.0.22

This project is listed in the Awesome Vite

Table of Contents

• Intro
• Features
• Installation
  • Procedures
    • Chrome
    • Firefox
• 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
• Twind
• Prettier
• ESLint
• Husky
• Commitlint
• Conventional Commits
• 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. 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

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

Contributors

Thanks To

Jonghakseo