diff --git a/assets/chrome-extension/background.js b/assets/chrome-extension/background.js index 519a30a81..268fade73 100644 --- a/assets/chrome-extension/background.js +++ b/assets/chrome-extension/background.js @@ -1,9 +1,9 @@ const DEFAULT_PORT = 18792 const BADGE = { - on: { text: 'ON', color: '#0B6E4F' }, + on: { text: 'ON', color: '#FF5A36' }, off: { text: '', color: '#000000' }, - connecting: { text: '…', color: '#B45309' }, + connecting: { text: '…', color: '#F59E0B' }, error: { text: '!', color: '#B91C1C' }, } @@ -46,6 +46,7 @@ function setBadge(tabId, kind) { const cfg = BADGE[kind] void chrome.action.setBadgeText({ tabId, text: cfg.text }) void chrome.action.setBadgeBackgroundColor({ tabId, color: cfg.color }) + void chrome.action.setBadgeTextColor({ tabId, color: '#FFFFFF' }).catch(() => {}) } async function ensureRelayConnection() { @@ -111,6 +112,10 @@ function onRelayClosed(reason) { for (const tabId of tabs.keys()) { void chrome.debugger.detach({ tabId }).catch(() => {}) setBadge(tabId, 'connecting') + void chrome.action.setTitle({ + tabId, + title: 'Clawdbot Browser Relay: disconnected (click to re-attach)', + }) } tabs.clear() tabBySession.clear() @@ -125,6 +130,17 @@ function sendToRelay(payload) { ws.send(JSON.stringify(payload)) } +async function maybeOpenHelpOnce() { + try { + const stored = await chrome.storage.local.get(['helpOnErrorShown']) + if (stored.helpOnErrorShown === true) return + await chrome.storage.local.set({ helpOnErrorShown: true }) + await chrome.runtime.openOptionsPage() + } catch { + // ignore + } +} + function requestFromRelay(command) { const id = command.id return new Promise((resolve, reject) => { @@ -207,6 +223,10 @@ async function attachTab(tabId, opts = {}) { tabs.set(tabId, { state: 'connected', sessionId, targetId, attachOrder }) tabBySession.set(sessionId, tabId) + void chrome.action.setTitle({ + tabId, + title: 'Clawdbot Browser Relay: attached (click to detach)', + }) if (!opts.skipAttachedEvent) { sendToRelay({ @@ -256,6 +276,10 @@ async function detachTab(tabId, reason) { } setBadge(tabId, 'off') + void chrome.action.setTitle({ + tabId, + title: 'Clawdbot Browser Relay (click to attach/detach)', + }) } async function connectOrToggleForActiveTab() { @@ -271,6 +295,10 @@ async function connectOrToggleForActiveTab() { tabs.set(tabId, { state: 'connecting' }) setBadge(tabId, 'connecting') + void chrome.action.setTitle({ + tabId, + title: 'Clawdbot Browser Relay: connecting to local relay…', + }) try { await ensureRelayConnection() @@ -278,10 +306,13 @@ async function connectOrToggleForActiveTab() { } catch (err) { tabs.delete(tabId) setBadge(tabId, 'error') - const message = err instanceof Error ? err.message : String(err) - // Service worker: best-effort surface via title. - void chrome.action.setTitle({ tabId, title: `Clawdbot: ${message}` }) + void chrome.action.setTitle({ + tabId, + title: 'Clawdbot Browser Relay: relay not running (open options for setup)', + }) + void maybeOpenHelpOnce() // Extra breadcrumbs in chrome://extensions service worker logs. + const message = err instanceof Error ? err.message : String(err) console.warn('attach failed', message, nowStack()) } } diff --git a/assets/chrome-extension/icons/icon128.png b/assets/chrome-extension/icons/icon128.png new file mode 100644 index 000000000..533cc812d Binary files /dev/null and b/assets/chrome-extension/icons/icon128.png differ diff --git a/assets/chrome-extension/icons/icon16.png b/assets/chrome-extension/icons/icon16.png new file mode 100644 index 000000000..1be23ae89 Binary files /dev/null and b/assets/chrome-extension/icons/icon16.png differ diff --git a/assets/chrome-extension/icons/icon32.png b/assets/chrome-extension/icons/icon32.png new file mode 100644 index 000000000..f4c1be8a6 Binary files /dev/null and b/assets/chrome-extension/icons/icon32.png differ diff --git a/assets/chrome-extension/icons/icon48.png b/assets/chrome-extension/icons/icon48.png new file mode 100644 index 000000000..d2a278af5 Binary files /dev/null and b/assets/chrome-extension/icons/icon48.png differ diff --git a/assets/chrome-extension/manifest.json b/assets/chrome-extension/manifest.json index b2d010be3..1e8e3db0c 100644 --- a/assets/chrome-extension/manifest.json +++ b/assets/chrome-extension/manifest.json @@ -3,10 +3,23 @@ "name": "Clawdbot Browser Relay", "version": "0.1.0", "description": "Attach Clawdbot to your existing Chrome tab via a local CDP relay server.", + "icons": { + "16": "icons/icon16.png", + "32": "icons/icon32.png", + "48": "icons/icon48.png", + "128": "icons/icon128.png" + }, "permissions": ["debugger", "tabs", "activeTab", "storage"], "host_permissions": ["http://127.0.0.1/*", "http://localhost/*"], "background": { "service_worker": "background.js", "type": "module" }, - "action": { "default_title": "Attach Clawdbot" }, + "action": { + "default_title": "Clawdbot Browser Relay (click to attach/detach)", + "default_icon": { + "16": "icons/icon16.png", + "32": "icons/icon32.png", + "48": "icons/icon48.png", + "128": "icons/icon128.png" + } + }, "options_ui": { "page": "options.html", "open_in_tab": true } } - diff --git a/assets/chrome-extension/options.html b/assets/chrome-extension/options.html index 43cb70d86..e1cdcbfa8 100644 --- a/assets/chrome-extension/options.html +++ b/assets/chrome-extension/options.html @@ -7,69 +7,185 @@ -

Clawdbot Browser Relay

+
+
+ +
+

Clawdbot Browser Relay

+

Click the toolbar button on a tab to attach / detach.

+
+
-
- -
- - +
+
+

Getting started

+

+ If you see a red ! badge on the extension icon, the relay server is not reachable. + Start Clawdbot’s browser relay on this machine (Gateway or clawdbot browser serve), + then click the toolbar button again. +

+

+ Full guide (install, remote Gateway, security): docs.clawd.bot/tools/chrome-extension +

+
+ +
+

Relay port

+ +
+ + +
+
+ Default: 18792. Extension connects to: http://127.0.0.1:<port>/. + Only change this if your Clawdbot profile uses a different cdpUrl port. +
+
+
-
- Default: 18792. Relay base URL: http://127.0.0.1:<port>/. -
-
+ +
- - - diff --git a/assets/chrome-extension/options.js b/assets/chrome-extension/options.js index 826c251d9..dfe9f08f2 100644 --- a/assets/chrome-extension/options.js +++ b/assets/chrome-extension/options.js @@ -7,10 +7,17 @@ function clampPort(value) { return n } +function updateRelayUrl(port) { + const el = document.getElementById('relay-url') + if (!el) return + el.textContent = `http://127.0.0.1:${port}/` +} + async function load() { const stored = await chrome.storage.local.get(['relayPort']) const port = clampPort(stored.relayPort) document.getElementById('port').value = String(port) + updateRelayUrl(port) } async function save() { @@ -18,6 +25,7 @@ async function save() { const port = clampPort(input.value) await chrome.storage.local.set({ relayPort: port }) input.value = String(port) + updateRelayUrl(port) const status = document.getElementById('status') status.textContent = `Saved. Using http://127.0.0.1:${port}/` setTimeout(() => { @@ -27,4 +35,3 @@ async function save() { document.getElementById('save').addEventListener('click', () => void save()) void load() -