Skip to content

Add Chrome Extension (Manifest V3) for GitHub Chat#9

Open
andres170788 wants to merge 1 commit intoinquid:masterfrom
andres170788:feature/chrome-extension
Open

Add Chrome Extension (Manifest V3) for GitHub Chat#9
andres170788 wants to merge 1 commit intoinquid:masterfrom
andres170788:feature/chrome-extension

Conversation

@andres170788
Copy link
Copy Markdown

Summary

Implements issue #1 — converts the existing web chat into a fully functional Chrome Extension (Manifest V3) that runs exclusively on github.com/* pages.

Features

  • Toggle button in the lower-right corner to show/hide the chat panel (as requested in Add this to a Chrome Extension #1)
  • iframe-based chat panel (320×480px) — minimal integration path as discussed
  • Per-repo chat rooms — automatically detects owner/repo from the URL
  • Firebase Firestore real-time messaging (reuses existing backend config)
  • GitHub-themed dark UI that matches the platform aesthetic
  • Toolbar icon click also toggles the chat
  • XSS protection via HTML entity escaping
  • Domain restricted to github.com/* only (via manifest content_scripts.matches)
  • Delete own messages support

Architecture

chrome-extension/
├── manifest.json        # Manifest V3 config
├── background.js        # Service worker (toolbar icon handler)
├── content.js           # Injects toggle button + iframe on github.com
├── content.css          # Toggle button & panel styles
├── chat.html            # Chat UI (loaded inside iframe)
├── chat.js              # Firebase chat logic (no inline scripts)
├── css/
│   ├── chat.css         # Chat panel styles
│   └── normalize.css    # CSS reset
└── images/
    ├── icon16.png
    ├── icon48.png
    └── icon128.png

How to Install & Test

  1. Clone this branch
  2. Go to chrome://extensions → Enable Developer Mode
  3. Click "Load unpacked" → Select the chrome-extension/ folder
  4. Navigate to any github.com page
  5. Click the green chat bubble in the lower-right corner

Screenshot

The extension adds a floating toggle button on GitHub pages. Clicking it opens a chat panel where users can communicate in real-time, with messages scoped to the current repository.

Closes #1

Implements issue inquid#1 - converts the web chat into a Chrome Extension that
works on github.com/* pages.

Features:
- Manifest V3 compliant Chrome Extension
- Floating toggle button (lower-right corner) to show/hide chat panel
- iframe-based chat panel with per-repo chat rooms
- Firebase Firestore real-time messaging (uses existing backend)
- GitHub-themed dark UI matching the platform aesthetic
- XSS protection via HTML escaping
- Toolbar icon click also toggles the chat
- Name prompt on first use, then persistent chat session
- Delete own messages support
- Responsive design optimized for the 320x480 panel size

Closes inquid#1
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Add this to a Chrome Extension

1 participant