diff --git a/github-chat.css b/github-chat.css
new file mode 100644
index 0000000..2d84918
--- /dev/null
+++ b/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);
+ }
+}
diff --git a/github-chat.js b/github-chat.js
new file mode 100644
index 0000000..92e5b59
--- /dev/null
+++ b/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 = `
+
+
+ `;
+
+ 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();
+ }
+})();
diff --git a/manifest.json b/manifest.json
index db0a183..c05de99 100644
--- a/manifest.json
+++ b/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": {