Skip to content

Commit b70d5a4

Browse files
JonghakseoJonghakseo
authored
Initial commit
0 parents  commit b70d5a4

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

65 files changed

+6179
-0
lines changed

‎.eslintrc‎

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
{
2+
"env": {
3+
"browser": true,
4+
"es6": true,
5+
"node": true
6+
},
7+
"extends": [
8+
"eslint:recommended",
9+
"plugin:react/recommended",
10+
"plugin:@typescript-eslint/recommended",
11+
"plugin:prettier/recommended"
12+
],
13+
"parser": "@typescript-eslint/parser",
14+
"parserOptions": {
15+
"ecmaFeatures": {
16+
"jsx": true
17+
},
18+
"ecmaVersion": "latest",
19+
"sourceType": "module"
20+
},
21+
"plugins": ["react", "@typescript-eslint"],
22+
"rules": {
23+
"react/react-in-jsx-scope": "off"
24+
},
25+
"globals": {
26+
"chrome": "readonly"
27+
},
28+
"ignorePatterns": ["watch.js", "dist/**"]
29+
}

‎.github/workflows/build.yml‎

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
name: Build And Test
2+
3+
on:
4+
push:
5+
branches: [ main ]
6+
pull_request:
7+
branches: [ main ]
8+
9+
jobs:
10+
build:
11+
12+
runs-on: ubuntu-latest
13+
14+
steps:
15+
- uses: actions/checkout@v3
16+
- name: Setup Node.js
17+
uses: actions/setup-node@v3
18+
with:
19+
cache: 'yarn'
20+
- run: yarn install
21+
- run: yarn build:hmr
22+
- run: yarn test
23+
- run: yarn build

‎.github/workflows/greetings.yml‎

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
name: Greetings
2+
3+
on: [pull_request_target, issues]
4+
5+
jobs:
6+
greeting:
7+
runs-on: ubuntu-latest
8+
permissions:
9+
issues: write
10+
pull-requests: write
11+
steps:
12+
- uses: actions/first-interaction@v1
13+
with:
14+
repo-token: ${{ secrets.GITHUB_TOKEN }}
15+
issue-message: 'Thank you for your contribution. We will check and reply to you as soon as possible.'
16+
pr-message: 'Thank you for your contribution. We will check and reply to you as soon as possible.'

‎.gitignore‎

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
# dependencies
2+
/node_modules
3+
4+
# testing
5+
/coverage
6+
7+
# build
8+
/dist
9+
10+
# etc
11+
.DS_Store
12+
.env.local
13+
.idea
14+
15+
# compiled
16+
utils/reload/*.js
17+
utils/reload/injections/*.js

‎.nvmrc‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
18.12.0

‎.prettierrc‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
{
2+
"singleQuote": false,
3+
"trailingComma": "es5",
4+
"arrowParens": "always"
5+
}

‎LICENSE‎

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
The MIT License (MIT)
2+
3+
Copyright (c) 2022 Seo Jong Hak
4+
5+
Permission is hereby granted, free of charge, to any person obtaining a copy
6+
of this software and associated documentation files (the "Software"), to deal
7+
in the Software without restriction, including without limitation the rights
8+
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9+
copies of the Software, and to permit persons to whom the Software is
10+
furnished to do so, subject to the following conditions:
11+
12+
The above copyright notice and this permission notice shall be included in all
13+
copies or substantial portions of the Software.
14+
15+
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16+
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17+
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18+
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19+
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20+
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21+
SOFTWARE.

‎README.md‎

Lines changed: 89 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,89 @@
1+
<div align="center">
2+
<img src="public/icon-128.png" alt="logo"/>
3+
<h1> Chrome Extension Boilerplate with<br/>React + Vite + TypeScript</h1>
4+
5+
![](https://img.shields.io/badge/React-61DAFB?style=flat-square&logo=react&logoColor=black)
6+
![](https://img.shields.io/badge/Typescript-3178C6?style=flat-square&logo=typescript&logoColor=white)
7+
![](https://badges.aleen42.com/src/vitejs.svg)
8+
![GitHub action badge](https://github.com/Jonghakseo/chrome-extension-boilerplate-react-vite/actions/workflows/build.yml/badge.svg)
9+
<img src="https://hits.seeyoufarm.com/api/count/incr/badge.svg?url=https://github.com/Jonghakseo/chrome-extension-boilerplate-react-viteFactions&count_bg=%23#222222&title_bg=%23#454545&title=😀&edge_flat=true" alt="hits"/>
10+
11+
12+
> This project is listed in the [Awesome Vite](https://github.com/vitejs/awesome-vite)
13+
14+
</div>
15+
16+
## Table of Contents
17+
18+
- [Intro](#intro)
19+
- [Features](#features)
20+
- [Installation](#installation)
21+
- [Procedures](#procedures)
22+
- [Screenshots](#screenshots)
23+
- [NewTab](#newtab)
24+
- [Popup](#popup)
25+
- [Documents](#documents)
26+
27+
28+
## Intro <a name="intro"></a>
29+
This boilerplate is made for creating chrome extensions using React and Typescript.
30+
> The focus was on improving the build speed and development experience with Vite.
31+
32+
## Features <a name="features"></a>
33+
- [React 18](https://reactjs.org/)
34+
- [TypeScript](https://www.typescriptlang.org/)
35+
- [Jest](https://jestjs.io/)
36+
- [React Testing Library](https://testing-library.com/docs/react-testing-library/intro/)
37+
- [Vite](https://vitejs.dev/)
38+
- [SASS](https://sass-lang.com/)
39+
- [ESLint](https://eslint.org/)
40+
- [Prettier](https://prettier.io/)
41+
- [Chrome Extension Manifest Version 3](https://developer.chrome.com/docs/extensions/mv3/intro/)
42+
- HMR(incomplete)
43+
- [Refresh PR](https://github.com/Jonghakseo/chrome-extension-boilerplate-react-vite/pull/25)
44+
45+
## Installation <a name="installation"></a>
46+
47+
### Procedures <a name="procedures"></a>
48+
1. Clone this repository.
49+
2. Change `name` and `description` in package.json => **Auto synchronize with manifest**
50+
3. Run `yarn install` or `npm i` (check your node version >= 16.6, recommended >= 18)
51+
4. Run `yarn dev` or `npm run dev`
52+
5. Load Extension on Chrome
53+
1. Open - Chrome browser
54+
2. Access - chrome://extensions
55+
3. Check - Developer mode
56+
4. Find - Load unpacked extension
57+
5. Select - `dist` folder in this project (after dev or build)
58+
6. If you want to build in production, Just run `yarn build` or `npm run build`.
59+
60+
## Screenshots <a name="screenshots"></a>
61+
62+
### New Tab <a name="newtab"></a>
63+
64+
<img width="971" src="https://user-images.githubusercontent.com/53500778/162631646-cd40976b-b737-43d0-8e6a-6ac090a2e2d4.png">
65+
66+
### Popup <a name="popup"></a>
67+
68+
<img width="314" alt="popup" src="https://user-images.githubusercontent.com/53500778/203561728-23517d46-12e3-4139-8a4f-e0b2f22a6ab3.png">
69+
70+
71+
## Documents <a name="documents"></a>
72+
- [Vite Plugin](https://vitejs.dev/guide/api-plugin.html)
73+
- [ChromeExtension](https://developer.chrome.com/docs/extensions/mv3/)
74+
- [Rollup](https://rollupjs.org/guide/en/)
75+
- [Rollup-plugin-chrome-extension](https://www.extend-chrome.dev/rollup-plugin)
76+
77+
78+
79+
---
80+
## Thanks To
81+
82+
| [Jetbrains](https://jb.gg/OpenSourceSupport) | [Jackson Hong](https://www.linkedin.com/in/j-acks0n/) |
83+
|--------------------------------------------------------------------------------------------------------------------------------------------|--------------------------------------------------------------------------------------------------|
84+
| <img width="100" src="https://resources.jetbrains.com/storage/products/company/brand/logos/jb_beam.png" alt="JetBrains Logo (Main) logo."> | <img width="100" src='https://avatars.githubusercontent.com/u/23139754?v=4' alt='Jackson Hong'/> |
85+
86+
87+
---
88+
89+
[Jonghakseo](https://nookpi.tistory.com/)

0 commit comments

Comments
 (0)