GithubHelp home page GithubHelp logo

louisrossouw / chrome-extension-boilerplate-react-vite Goto Github PK

View Code? Open in Web Editor NEW

This project forked from jonghakseo/chrome-extension-boilerplate-react-vite

0.0 0.0 0.0 2 MB

Chrome Extension Boilerplate with React + Vite + Typescript

License: MIT License

Shell 0.13% JavaScript 10.54% TypeScript 62.64% CSS 24.17% HTML 2.42% SCSS 0.10%

chrome-extension-boilerplate-react-vite's Introduction

logo

Chrome Extension Boilerplate with
React + Vite + TypeScript

GitHub action badge hits

This boilerplate has Legacy version

Tip

This project is listed in the Awesome Vite

Important

Share storage state between every page

2024-05-12.1.50.13.mov

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

Features

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)
    • 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 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 for chrome extension (content_scripts in manifest.json)
  • content-ui - content script for render UI in user's page (content_scripts in manifest.json)
  • devtools - devtools for chrome extension (devtools_page in manifest.json)
  • devtools-panel - devtools panel for devtools
  • newtab - new tab for chrome extension (chrome_url_overrides.newtab in manifest.json)
  • options - options for chrome extension (options_page in manifest.json)
  • popup - popup for chrome extension (action.default_popup in manifest.json)
  • sidepanel - sidepanel(Chrome 114+) for chrome extension (side_panel.default_path in manifest.json)

Reference

Star History

Star History Chart

Contributors

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

All Contributors

Special Thanks To

JetBrains Logo (Main) logo. Jackson Hong

Made by Jonghakseo

chrome-extension-boilerplate-react-vite's People

Contributors

jonghakseo avatar dependabot[bot] avatar allcontributors[bot] avatar patrykkuniczak avatar wonkydd avatar junywuuuu91 avatar code-factor avatar bowencool avatar fell-lucas avatar rhea-so avatar govza avatar barantaran avatar ofir-zeitoun avatar leizhenpeng avatar kangju2000 avatar webliang avatar aspiers avatar aarcangeli avatar andronasef avatar d1no avatar egor-xyz avatar theshinriel avatar gai-h avatar jackluson avatar jguddas avatar omribarzik avatar pmorch avatar raynirola avatar romaindequidt avatar tp-o avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.