https://github.com/neoki07/chrome-extension-github-custom-indent-size

https://github.com/neoki07/chrome-extension-github-custom-indent-size

Last synced: 9 days ago
JSON representation

• Host: GitHub
• URL: https://github.com/neoki07/chrome-extension-github-custom-indent-size
• Owner: neoki07
• License: mit
• Created: 2023-04-04T15:02:27.000Z (almost 2 years ago)
• Default Branch: main
• Last Pushed: 2023-07-03T12:58:28.000Z (over 1 year ago)
• Last Synced: 2024-12-18T20:43:59.305Z (2 months ago)
• Language: TypeScript
• Size: 194 KB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 5
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

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.yml/badge.svg)



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



## Table of Contents

- [Intro](#intro)

- [Features](#features)

- [Installation](#installation)

  - [Procedures](#procedures)

- [Screenshots](#screenshots)

  - [NewTab](#newtab)

  - [Popup](#popup)  

- [Documents](#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](https://reactjs.org/)

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

- [Jest](https://jestjs.io/)

- [React Testing Library](https://testing-library.com/docs/react-testing-library/intro/)

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

- [SASS](https://sass-lang.com/)

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

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

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

- HRR(Hot Rebuild & Refresh/Reload)

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

   1. Open - Chrome browser

   2. Access - chrome://extensions

   3. Check - Developer mode

   4. Find - Load unpacked extension

   5. Select - `dist` folder in this project (after dev or build)

6. If you want to build in production, Just run `yarn build` or `npm run build`.

## Screenshots 

### New Tab 



### Popup 



## Documents 

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

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

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

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

---

## Thanks To

| [Jetbrains](https://jb.gg/OpenSourceSupport)                                                                           | [Jackson Hong](https://www.linkedin.com/in/j-acks0n/)                                            |

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

|  |  |

---

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