https://github.com/gkzhb/wallabag-extension

Last synced: 3 months ago
JSON representation

Host: GitHub
URL: https://github.com/gkzhb/wallabag-extension
Owner: gkzhb
License: mit
Created: 2023-08-06T10:24:41.000Z (almost 2 years ago)
Default Branch: main
Last Pushed: 2023-10-30T21:09:07.000Z (over 1 year ago)
Last Synced: 2024-04-28T06:07:02.627Z (about 1 year ago)
Language: TypeScript
Size: 557 KB
Stars: 0
Watchers: 1
Forks: 0
Open Issues: 5
Metadata Files:
- Readme: README.md
- 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 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)  

- [Examples](#examples)

- [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/)

- [Tailwind CSS](https://tailwindcss.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 



## 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](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)

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

---

## Thanks To

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

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

|  |  |

---

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