Add GitHub Chat extension widget

github-chat.css

@@ -0,0 +1,105 @@
+#github-chat-extension-root {
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
+  position: fixed;
+  right: 20px;
+  bottom: 20px;
+  z-index: 2147483647;
+}
+
+.github-chat-toggle {
+  align-items: center;
+  background: #2da44e;
+  border: 1px solid rgba(27, 31, 36, 0.15);
+  border-radius: 999px;
+  box-shadow: 0 8px 24px rgba(27, 31, 36, 0.22);
+  color: #ffffff;
+  cursor: pointer;
+  display: inline-flex;
+  font-size: 14px;
+  font-weight: 600;
+  min-height: 44px;
+  padding: 0 18px;
+}
+
+.github-chat-toggle:hover {
+  background: #2c974b;
+}
+
+.github-chat-panel {
+  background: #ffffff;
+  border: 1px solid #d0d7de;
+  border-radius: 8px;
+  bottom: 58px;
+  box-shadow: 0 16px 48px rgba(27, 31, 36, 0.28);
+  display: flex;
+  flex-direction: column;
+  height: min(620px, calc(100vh - 96px));
+  overflow: hidden;
+  position: absolute;
+  right: 0;
+  width: min(420px, calc(100vw - 32px));
+}
+
+.github-chat-panel[hidden] {
+  display: none;
+}
+
+.github-chat-header {
+  align-items: center;
+  background: #f6f8fa;
+  border-bottom: 1px solid #d0d7de;
+  display: flex;
+  justify-content: space-between;
+  min-height: 52px;
+  padding: 10px 12px;
+}
+
+.github-chat-header strong,
+.github-chat-header span {
+  display: block;
+}
+
+.github-chat-header span {
+  color: #57606a;
+  font-size: 12px;
+  margin-top: 2px;
+  max-width: 320px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.github-chat-close {
+  background: transparent;
+  border: 0;
+  color: #57606a;
+  cursor: pointer;
+  font-size: 24px;
+  height: 32px;
+  line-height: 1;
+  padding: 0;
+  width: 32px;
+}
+
+.github-chat-close:hover {
+  color: #24292f;
+}
+
+.github-chat-frame {
+  border: 0;
+  flex: 1;
+  width: 100%;
+}
+
+@media (max-width: 520px) {
+  #github-chat-extension-root {
+    bottom: 12px;
+    right: 12px;
+  }
+
+  .github-chat-panel {
+    bottom: 56px;
+    height: min(620px, calc(100vh - 80px));
+    width: calc(100vw - 24px);
+  }
+}

github-chat.js

@@ -0,0 +1,96 @@
+(function () {
+  const CHAT_APP_URL = 'https://inquid.github.io/github-chat/';
+  const ROOT_ID = 'github-chat-extension-root';
+
+  function getRepositoryFromPath() {
+    const parts = window.location.pathname.split('/').filter(Boolean);
+    if (parts.length < 2) return '';
+    return `${parts[0]}/${parts[1]}`;
+  }
+
+  function createChatUrl() {
+    const url = new URL(CHAT_APP_URL);
+    const repository = getRepositoryFromPath();
+
+    if (repository) {
+      url.searchParams.set('repository', repository);
+    }
+
+    url.searchParams.set('page', window.location.href);
+    return url.toString();
+  }
+
+  function createChatRoot() {
+    const root = document.createElement('div');
+    root.id = ROOT_ID;
+    root.innerHTML = `
+      <button
+        class="github-chat-toggle"
+        type="button"
+        aria-expanded="false"
+        aria-controls="github-chat-panel"
+      >
+        Chat
+      </button>
+      <section
+        id="github-chat-panel"
+        class="github-chat-panel"
+        aria-label="GitHub chat"
+        hidden
+      >
+        <header class="github-chat-header">
+          <div>
+            <strong>GitHub Chat</strong>
+            <span>${getRepositoryFromPath() || 'github.com'}</span>
+          </div>
+          <button class="github-chat-close" type="button" aria-label="Close chat">
+            ×
+          </button>
+        </header>
+        <iframe
+          class="github-chat-frame"
+          title="GitHub Chat"
+          src="${createChatUrl()}"
+          loading="lazy"
+        ></iframe>
+      </section>
+    `;
+
+    document.body.appendChild(root);
+    return root;
+  }
+
+  function initGithubChat() {
+    if (document.getElementById(ROOT_ID)) return;
+
+    const root = createChatRoot();
+    const toggle = root.querySelector('.github-chat-toggle');
+    const panel = root.querySelector('.github-chat-panel');
+    const close = root.querySelector('.github-chat-close');
+
+    function setOpen(isOpen) {
+      panel.hidden = !isOpen;
+      toggle.setAttribute('aria-expanded', String(isOpen));
+    }
+
+    toggle.addEventListener('click', function () {
+      setOpen(panel.hidden);
+    });
+
+    close.addEventListener('click', function () {
+      setOpen(false);
+    });
+
+    document.addEventListener('keydown', function (event) {
+      if (event.key === 'Escape' && !panel.hidden) {
+        setOpen(false);
+      }
+    });
+  }
+
+  if (document.readyState === 'loading') {
+    document.addEventListener('DOMContentLoaded', initGithubChat);
+  } else {
+    initGithubChat();
+  }
+})();

manifest.json

@@ -17,16 +17,17 @@
   "content_scripts": [
     {
       "matches": [
-        "https://github.com/",
-        "https://github.com/orgs/*"
-      ],
-      "js": [
-        "content-script.js"
-      ],
-      "css": [
-        "story-list.css",
-        "story-view.css"
-      ]
+  "https://github.com/*"
+],
+"js": [
+  "content-script.js",
+  "github-chat.js"
+],
+"css": [
+  "story-list.css",
+  "story-view.css",
+  "github-chat.css"
+]
     }
   ],
   "icons": {