feat: add GitHub-only Chrome extension chat toggle

README.md

@@ -3,3 +3,28 @@
 [![Boss Bounty Badge](https://img.shields.io/endpoint.svg?url=https://api.boss.dev/badge/enabled/inquid/github-chat)](https://www.boss.dev/issues/repo/inquid/github-chat)
 
 Chat to the github owner, so you can ask questions or discuss something instead of only creating, issues.
+
+## Chrome extension mode
+
+This repository now includes a minimal Chrome Extension (Manifest V3) that:
+
+- injects only on `https://github.com/*`
+- adds a toggle button in the lower-right corner
+- shows/hides the chat in an iframe panel
+
+### Load locally in Chrome
+
+1. Open `chrome://extensions`
+2. Enable **Developer mode**
+3. Click **Load unpacked**
+4. Select this project folder
+
+### Files
+
+- `manifest.json` - extension manifest and GitHub domain match
+- `extension/content-script.js` - adds toggle button + iframe panel
+- `extension/content-style.css` - extension UI styles
+
+## Notes on implementation choice
+
+For this first implementation, the extension uses an iframe (`index.html`) to reuse the existing chat UI.

extension/content-script.js

@@ -0,0 +1,36 @@
+(() => {
+  const ROOT_ID = "github-chat-extension-root";
+  if (document.getElementById(ROOT_ID)) {
+    return;
+  }
+
+  const root = document.createElement("div");
+  root.id = ROOT_ID;
+
+  const panel = document.createElement("div");
+  panel.className = "github-chat-panel";
+  panel.setAttribute("aria-hidden", "true");
+
+  const frame = document.createElement("iframe");
+  frame.className = "github-chat-frame";
+  frame.src = chrome.runtime.getURL("index.html");
+  frame.title = "GitHub Chat";
+  panel.appendChild(frame);
+
+  const button = document.createElement("button");
+  button.type = "button";
+  button.className = "github-chat-toggle";
+  button.setAttribute("aria-expanded", "false");
+  button.textContent = "Chat";
+
+  button.addEventListener("click", () => {
+    const isOpen = panel.classList.toggle("is-open");
+    panel.setAttribute("aria-hidden", String(!isOpen));
+    button.setAttribute("aria-expanded", String(isOpen));
+    button.textContent = isOpen ? "Close Chat" : "Chat";
+  });
+
+  root.appendChild(panel);
+  root.appendChild(button);
+  document.documentElement.appendChild(root);
+})();

extension/content-style.css

@@ -0,0 +1,47 @@
+#github-chat-extension-root {
+  position: fixed;
+  right: 16px;
+  bottom: 16px;
+  z-index: 2147483647;
+  display: flex;
+  flex-direction: column;
+  align-items: flex-end;
+  gap: 8px;
+}
+
+#github-chat-extension-root .github-chat-toggle {
+  border: none;
+  border-radius: 999px;
+  padding: 8px 14px;
+  font-size: 13px;
+  font-weight: 600;
+  color: #ffffff;
+  background: #2da44e;
+  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.25);
+  cursor: pointer;
+}
+
+#github-chat-extension-root .github-chat-toggle:hover {
+  background: #2c974b;
+}
+
+#github-chat-extension-root .github-chat-panel {
+  display: none;
+  width: min(380px, calc(100vw - 32px));
+  height: min(560px, calc(100vh - 100px));
+  border: 1px solid #d0d7de;
+  border-radius: 10px;
+  overflow: hidden;
+  background: #ffffff;
+  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.28);
+}
+
+#github-chat-extension-root .github-chat-panel.is-open {
+  display: block;
+}
+
+#github-chat-extension-root .github-chat-frame {
+  width: 100%;
+  height: 100%;
+  border: 0;
+}

index.html

@@ -94,7 +94,7 @@ <h2>Firebase</h2>
 </div>
 <div class="bg"></div>
 
-<script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
+<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
 <script src='https://cdnjs.cloudflare.com/ajax/libs/malihu-custom-scrollbar-plugin/3.1.3/jquery.mCustomScrollbar.concat.min.js'></script>
 
         <script src="js/index.js"></script>
@@ -115,4 +115,4 @@ <h2>Firebase</h2>
 
 <div class="footer fixed-bottom">
     Inquid
-</div>
+</div>

manifest.json

@@ -0,0 +1,32 @@
+{
+  "manifest_version": 3,
+  "name": "GitHub Chat",
+  "description": "Toggle a chat panel on any GitHub page.",
+  "version": "1.0.0",
+  "content_scripts": [
+    {
+      "matches": [
+        "https://github.com/*"
+      ],
+      "js": [
+        "extension/content-script.js"
+      ],
+      "css": [
+        "extension/content-style.css"
+      ],
+      "run_at": "document_idle"
+    }
+  ],
+  "web_accessible_resources": [
+    {
+      "resources": [
+        "index.html",
+        "css/*",
+        "js/*"
+      ],
+      "matches": [
+        "https://github.com/*"
+      ]
+    }
+  ]
+}