• 개인용 git hub 알림 크롬 익스텐션

Notifly 🔔

GitHub 알림을 브라우저에서 바로 확인하는 크롬 익스텐션

GitHub에 직접 접속하지 않아도 나에게 온 PR 리뷰 요청, 멘션, 이슈 할당, CI 상태를 한눈에 확인할 수 있어요.

---

📸 미리보기

---

✨ 기능

기능	설명
🔔 실시간 알림	PR 리뷰 요청, 댓글/멘션, 할당된 이슈, CI 상태
🔗 바로 이동	알림 클릭 시 해당 GitHub 페이지로 즉시 이동
✅ 읽음 처리	클릭한 알림 자동 읽음 처리
🎨 다크 테마	GitHub 스타일의 깔끔한 다크 UI
🔢 배지 표시	읽지 않은 알림 수를 아이콘 배지로 표시
🔐 두 가지 인증	Personal Access Token 또는 GitHub OAuth 로그인

---

🚀 설치 방법

1. 빌드

pnpm install
pnpm build

2. 크롬에 로드

1. chrome://extensions 접속
2. 우측 상단 개발자 모드 활성화
3. 압축해제된 확장 프로그램을 로드합니다 클릭
4. dist/ 폴더 선택

---

🔐 인증 설정

Personal Access Token (PAT)

1. GitHub Settings → Tokens 에서 토큰 생성
2. 필요 권한: notifications, repo
3. 익스텐션 설정 화면에서 토큰 입력

OAuth 로그인

1. .env.local 파일 생성 후 Client ID 입력:

   VITE_GITHUB_CLIENT_ID=your_client_id
   

2. 익스텐션 설정 화면에서 GitHub OAuth로 로그인 클릭

---

🛠 기술 스택

• Chrome Extension Manifest V3
• React 18 + TypeScript
• Tailwind CSS — 다크 테마 UI
• Zustand — 상태 관리
• Octokit — GitHub REST API
• Vite + CRXJS — 번들링

---

🧪 테스트

pnpm test

---

📁 프로젝트 구조

src/
├── popup/
│   ├── components/     # UI 컴포넌트
│   ├── store/          # Zustand 스토어
│   └── App.tsx
├── background/
│   └── service-worker.ts   # 폴링 + 배지
└── lib/
    ├── github.ts       # GitHub API
    └── auth.ts         # 인증 처리

---

📄 License

MIT