🐙 GitHub PR & Mention Manager (Chrome Extension)

A Chrome Extension (Manifest V3) built with React, TypeScript, Tailwind CSS, and Vite to manage open/merged GitHub Pull Requests, track @mentions, view CI statuses, and inspect organization labels with authentic GitHub-native styling.

---

✨ Key Features

1. GitHub Native Label & Status Styling:

   • Status Badges: Open (🟢), Merged (🟣), Draft (⚪), Closed (🔴) with official GitHub Octicons and pill designs.
   • Dynamic WCAG contrast calculation for repository tags and organization labels.
   • Review Decisions (Approved, Changes requested, Review required) & live CI check icons.

2. Top-Left Hamburger Menu with Hover Label Inspection:

   • Click the hamburger button (☰) in the top-left corner to open the Organizations drawer.
   • Hover over any organization to instantly preview its active labels with colors, counts, and descriptions.
   • Click any label or organization to instantly filter your open PRs and mentions.

3. Multi-Account & GitHub ID Onboarding:

   • On install, prompts for your GitHub ID / Personal Access Token (PAT).
   • Seamlessly add multiple GitHub IDs/accounts and switch active profiles from the top bar or settings.
   • Tokens are validated via GitHub GraphQL API and stored locally in browser storage.

4. Pull Request & Mention Tracking:

   • My PRs: Open authored PRs with CI check status, review status, and diff statistics (+/- lines).
   • Review Requests: PRs waiting for your review.
   • Merged: Recently merged pull requests.
   • Mentions: Issues and PR comments where you are directly @mentioned.

5. Background Sync & Badge Counters:

   • Automatic background polling via chrome.alarms every 1–30 minutes (configurable).
   • Live extension badge counters displaying pending reviews, failing CI checks, or unread mentions.
   • Configurable desktop alerts (chrome.notifications).

---

🚀 How to Load in Google Chrome

1. Build the extension:

   npm run build

2. Open Google Chrome and navigate to:

   chrome://extensions/
   

3. Enable Developer mode using the toggle in the top-right corner.
4. Click Load unpacked and select the dist/ directory inside this project:

   /Users/manthannimodiya/Coding/Projects/GithubManager/dist
   

5. Click on the extension icon in your Chrome toolbar to open the onboarding screen and connect your GitHub account!

---

🔑 Required GitHub Token Permissions

When generating a Personal Access Token (Classic or Fine-Grained):

• repo (Full control of private repositories)
• read:org (Read org and team membership, read org projects)
• notifications (Access notifications and mention streams)

---

🛠 Tech Stack

• Manifest: Chrome Manifest V3
• Framework: React 18 + TypeScript
• Styling: Tailwind CSS (GitHub Dark Palette) + Lucide Icons
• API: GitHub GraphQL API (https://api.github.com/graphql)
• Bundler: Vite 6