inquid · MISUN934 · May 18, 2026 · May 18, 2026 · May 18, 2026
diff --git a/chrome-extension/.gitignore 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
@@ -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
@@ -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
@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>GitHub Chat</title>
+  <link rel="stylesheet" href="chat-widget.css">
+</head>
+<body style="margin:0;padding:0;height:100vh;overflow:hidden;">
+  <div class="github-chat" style="height:100%">
+    <div class="chat-header">
+      <svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor"><path d="M20 2H4c-1.1 0-2 .9-2 2v18l4-4h14c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2z"/></svg>
+      <span>GitHub Chat</span>
+    </div>
+    <div class="messages" id="messages"></div>
+    <div class="input-area">
+      <input type="text" id="messageInput" placeholder="Type a message..." maxlength="500">
+      <button id="sendBtn">Send</button>
+    </div>
+  </div>
+
+  <script src="firebase-app.js"></script>
+  <script src="firebase-database.js"></script>
+  <script src="firebase-firestore.js"></script>
+  <script src="firebase-config.js"></script>
+  <script src="chat-widget.js"></script>
+</body>
+</html>
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,2 @@
		# Firebase config with real keys - exclude from version control
		firebase-config.js