diff --git a/README.md b/README.md index 123ef31..b55e187 100644 --- a/README.md +++ b/README.md @@ -3,3 +3,28 @@ [](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. diff --git a/extension/content-script.js b/extension/content-script.js new file mode 100644 index 0000000..9bfe103 --- /dev/null +++ b/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); +})(); diff --git a/extension/content-style.css b/extension/content-style.css new file mode 100644 index 0000000..a154781 --- /dev/null +++ b/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; +} diff --git a/index.html b/index.html index c96bd34..06a660d 100644 --- a/index.html +++ b/index.html @@ -94,7 +94,7 @@