diff --git a/chrome-extension/.gitignore b/chrome-extension/.gitignore new file mode 100644 index 0000000..2ac2913 --- /dev/null +++ b/chrome-extension/.gitignore @@ -0,0 +1,2 @@ +# Firebase config with real keys - exclude from version control +firebase-config.js diff --git a/chrome-extension/README.md b/chrome-extension/README.md new file mode 100644 index 0000000..6fafdf5 --- /dev/null +++ b/chrome-extension/README.md @@ -0,0 +1,41 @@ +# GitHub Chat - Chrome Extension + +A Chrome extension that adds a real-time chat widget to every GitHub repository page. + +## Features +- Toggle chat with a button in the bottom-right corner +- Real-time messaging via Firebase Firestore +- Chat on any `github.com/*` page +- Delete your own messages +- Persistent display name (localStorage) +- Responsive design (full screen on mobile) + +## Installation (Developer Mode) +1. Open `chrome://extensions` in Chrome +2. Enable "Developer mode" (top right) +3. Click "Load unpacked" +4. Select this `chrome-extension/` folder +5. Visit any GitHub repo page - the chat button appears in the bottom right + +## How It Works +- **Content script** (`content.js`): Injects a toggle button and iframe into GitHub pages +- **Chat widget** (`chat-widget.html` + `chat-widget.js`): The chat UI running inside the iframe +- **Firebase Firestore**: Stores and syncs messages in real-time + +## Technical Details +- Manifest V3 compliant +- No special permissions required +- Only activates on `https://github.com/*` +- Uses the existing `inquid-chat` Firebase project + +## Files +| File | Purpose | +|------|---------| +| `manifest.json` | Extension manifest (V3) | +| `content.js` | Content script - injects UI into GitHub | +| `chat-widget.html` | Chat UI (loaded in iframe) | +| `chat-widget.js` | Chat logic and Firebase integration | +| `chat-widget.css` | Styles for toggle button and chat widget | +| `icon*.png` | Extension icons | + +Closes #1 diff --git a/chrome-extension/chat-widget.css b/chrome-extension/chat-widget.css new file mode 100644 index 0000000..eb7a027 --- /dev/null +++ b/chrome-extension/chat-widget.css @@ -0,0 +1,201 @@ +/* Toggle Button */ +#github-chat-toggle { + position: fixed; + bottom: 20px; + right: 20px; + z-index: 9999; + width: 56px; + height: 56px; + border-radius: 50%; + background: #2da44e; + cursor: pointer; + display: flex; + align-items: center; + justify-content: center; + box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3); + transition: all 0.2s ease; +} +#github-chat-toggle:hover { + background: #2c974b; + transform: scale(1.05); +} +#github-chat-toggle.active { + background: #cf222e; +} + +/* Chat Container */ +#github-chat-container { + display: none; + position: fixed; + bottom: 90px; + right: 20px; + z-index: 9998; + width: 380px; + height: 520px; + border-radius: 12px; + box-shadow: 0 8px 30px rgba(0, 0, 0, 0.25); + overflow: hidden; + background: #fff; +} + +/* Responsive */ +@media (max-width: 480px) { + #github-chat-container { + width: 100vw; + height: 100vh; + bottom: 0; + right: 0; + border-radius: 0; + } + #github-chat-toggle { + bottom: 16px; + right: 16px; + } +} + +/* Chat Widget Internal Styles */ +.github-chat * { + box-sizing: border-box; + margin: 0; + padding: 0; +} +.github-chat { + font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif; + display: flex; + flex-direction: column; + height: 100%; + background: #f6f8fa; +} +.github-chat .chat-header { + background: #24292f; + color: white; + padding: 12px 16px; + font-size: 16px; + font-weight: 600; + display: flex; + align-items: center; + gap: 8px; +} +.github-chat .chat-header .repo-name { + font-size: 13px; + opacity: 0.85; + font-weight: 400; +} +.github-chat .messages { + flex: 1; + overflow-y: auto; + padding: 16px; + display: flex; + flex-direction: column; + gap: 8px; +} +.github-chat .message { + max-width: 80%; + padding: 10px 14px; + border-radius: 12px; + font-size: 14px; + line-height: 1.4; + word-wrap: break-word; + position: relative; +} +.github-chat .message.sent { + align-self: flex-end; + background: #ddf4ff; + border: 1px solid #54aeff; +} +.github-chat .message.received { + align-self: flex-start; + background: #fff; + border: 1px solid #d0d7de; +} +.github-chat .message .sender { + font-size: 11px; + font-weight: 600; + color: #656d76; + margin-bottom: 4px; +} +.github-chat .message .delete-btn { + position: absolute; + top: 4px; + right: 8px; + background: none; + border: none; + color: #cf222e; + cursor: pointer; + font-size: 12px; + display: none; + padding: 2px 4px; + border-radius: 3px; +} +.github-chat .message:hover .delete-btn { + display: block; +} +.github-chat .message .delete-btn:hover { + background: #ffebe9; +} +.github-chat .input-area { + padding: 12px; + background: #fff; + border-top: 1px solid #d0d7de; + display: flex; + gap: 8px; +} +.github-chat .input-area input { + flex: 1; + padding: 8px 12px; + border: 1px solid #d0d7de; + border-radius: 6px; + font-size: 14px; + outline: none; +} +.github-chat .input-area input:focus { + border-color: #0969da; + box-shadow: 0 0 0 3px rgba(9, 105, 218, 0.15); +} +.github-chat .input-area button { + padding: 8px 16px; + background: #2da44e; + color: white; + border: none; + border-radius: 6px; + font-size: 14px; + font-weight: 500; + cursor: pointer; +} +.github-chat .input-area button:hover { + background: #2c974b; +} +.github-chat .name-prompt { + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + height: 100%; + gap: 12px; + padding: 32px; + text-align: center; +} +.github-chat .name-prompt h2 { + color: #24292f; +} +.github-chat .name-prompt p { + color: #656d76; + font-size: 14px; +} +.github-chat .name-prompt input { + padding: 8px 12px; + border: 1px solid #d0d7de; + border-radius: 6px; + font-size: 14px; + width: 100%; + max-width: 250px; +} +.github-chat .name-prompt button { + padding: 8px 24px; + background: #2da44e; + color: white; + border: none; + border-radius: 6px; + font-size: 14px; + cursor: pointer; +} diff --git a/chrome-extension/chat-widget.html b/chrome-extension/chat-widget.html new file mode 100644 index 0000000..113a0fd --- /dev/null +++ b/chrome-extension/chat-widget.html @@ -0,0 +1,28 @@ + + +
+ + +Enter a display name to start chatting
' + + '' + + '' + + "