Merge pull request #17 from 2coolchampion/dev

No idea.

.github/ISSUE_TEMPLATE/bug_report.md

@@ -1,17 +1,17 @@
 ---
 name: Bug report
 about: Create a report to help us improve
-title: ''
+title: ""
 labels: bug
 assignees: Jonghakseo
-
 ---
 
 **Describe the bug**
 A clear and concise description of what the bug is.
 
 **To Reproduce**
 Steps to reproduce the behavior:
+
 1. Go to '...'
 2. Click on '....'
 3. Scroll down to '....'
@@ -24,9 +24,10 @@ A clear and concise description of what you expected to happen.
 If applicable, add screenshots to help explain your problem.
 
 **Desktop (please complete the following information):**
- - OS: [e.g. Mac, Window, Linux]
- - Browser [e.g. chrome, firefox]
- - Node Version [e.g. 18.12.0]
+
+- OS: [e.g. Mac, Window, Linux]
+- Browser [e.g. chrome, firefox]
+- Node Version [e.g. 18.12.0]
 
 **Additional context**
 Add any other context about the problem here.

.github/ISSUE_TEMPLATE/feature_request.md

@@ -1,10 +1,9 @@
 ---
 name: Feature request
 about: Suggest an idea for this project
-title: ''
+title: ""
 labels: enhancement
 assignees: Jonghakseo
-
 ---
 
 **Is your feature request related to a problem? Please describe.**

.github/workflows/build-zip.yml

@@ -2,12 +2,11 @@ name: Build And Upload Extension Zip Via Artifact
 
 on:
   push:
-    branches: [ main ]
+    branches: [main]
   pull_request:
 
 jobs:
   build:
-
     runs-on: ubuntu-latest
 
     steps:
@@ -16,7 +15,7 @@ jobs:
       - name: Setup Node.js
         uses: actions/setup-node@v3
         with:
-          cache: 'yarn'
+          cache: "yarn"
 
       - uses: actions/cache@v3
         with:

.github/workflows/greetings.yml

@@ -9,8 +9,8 @@ jobs:
       issues: write
       pull-requests: write
     steps:
-    - uses: actions/first-interaction@v1
-      with:
-        repo-token: ${{ secrets.GITHUB_TOKEN }}
-        issue-message: 'Thank you for your contribution. We will check and reply to you as soon as possible.'
-        pr-message: 'Thank you for your contribution. We will check and reply to you as soon as possible.'
+      - uses: actions/first-interaction@v1
+        with:
+          repo-token: ${{ secrets.GITHUB_TOKEN }}
+          issue-message: "Thank you for your contribution. We will check and reply to you as soon as possible."
+          pr-message: "Thank you for your contribution. We will check and reply to you as soon as possible."

.github/workflows/test.yml

@@ -2,7 +2,7 @@ name: Test
 
 on:
   push:
-    branches: [ main ]
+    branches: [main]
   pull_request:
 
 jobs:
@@ -15,7 +15,7 @@ jobs:
       - name: Setup Node.js
         uses: actions/setup-node@v3
         with:
-          cache: 'yarn'
+          cache: "yarn"
 
       - uses: actions/cache@v3
         with:

.prettierrc

@@ -1,4 +1,5 @@
 {
+  "plugins": ["prettier-plugin-tailwindcss"],
   "singleQuote": false,
   "trailingComma": "es5",
   "arrowParens": "always"

README.md

@@ -8,7 +8,6 @@
 ![GitHub action badge](https://github.com/Jonghakseo/chrome-extension-boilerplate-react-vite/actions/workflows/build-zip.yml/badge.svg)
 <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"/>
 
-
 > This project is listed in the [Awesome Vite](https://github.com/vitejs/awesome-vite)
 
 </div>
@@ -18,18 +17,19 @@
 - [Intro](#intro)
 - [Features](#features)
 - [Installation](#installation)
-    - [Procedures](#procedures)
-      - [Chrome](#chrome) 
-      - [Firefox](#firefox) 
+  - [Procedures](#procedures)
+    - [Chrome](#chrome)
+    - [Firefox](#firefox)
 - [Screenshots](#screenshots)
-    - [NewTab](#newtab)
-    - [Popup](#popup)
+  - [NewTab](#newtab)
+  - [Popup](#popup)
 - [Examples](#examples)
 - [Documents](#documents)
 
 ## Intro <a name="intro"></a>
 
 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 <a name="features"></a>
@@ -59,8 +59,8 @@ This boilerplate is made for creating chrome extensions using React and Typescri
 ### For Chrome: <a name="chrome"></a>
 
 1. Run:
-    - Dev: `yarn dev` or `npm run dev`
-    - Prod: `yarn build` or `npm run build`
+   - Dev: `yarn dev` or `npm run dev`
+   - Prod: `yarn build` or `npm run build`
 2. Open in browser - `chrome://extensions`
 3. Check - `Developer mode`
 4. Find and Click - `Load unpacked extension`
@@ -69,8 +69,8 @@ This boilerplate is made for creating chrome extensions using React and Typescri
 ### For Firefox: <a name="firefox"></a>
 
 1. Run:
-    - Dev: `yarn dev:firefox` or `npm run dev:firefox`
-    - Prod: `yarn build:firefox` or `npm run build:firefox`
+   - Dev: `yarn dev:firefox` or `npm run dev:firefox`
+   - Prod: `yarn 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
@@ -104,14 +104,12 @@ This boilerplate is made for creating chrome extensions using React and Typescri
 
 [![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/)                                            |
-|--------------------------------------------------------------------------------------------------------------------------------------------|--------------------------------------------------------------------------------------------------|
+| ------------------------------------------------------------------------------------------------------------------------------------------ | ------------------------------------------------------------------------------------------------ |
 | <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'/> |
 
 ---

lib/utils/utils.ts

@@ -0,0 +1,6 @@
+import { type ClassValue, clsx } from "clsx";
+import { twMerge } from "tailwind-merge";
+
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs));
+}

manifest.ts

@@ -9,7 +9,7 @@ const manifest: chrome.runtime.ManifestV3 = {
   version: packageJson.version,
   description: packageJson.description,
   permissions: ["storage", "scripting"],
-  host_permissions: ['*://*/*'],
+  host_permissions: ["*://*/*"],
   options_page: "src/pages/options/index.html",
   background: {
     service_worker: "src/pages/background/index.js",