feat: improve extension options diagnostics

This commit is contained in:
Peter Steinberger
2026-01-15 05:15:33 +00:00
parent 612cdac4c3
commit 4fb114dcb3
2 changed files with 33 additions and 5 deletions

View File

@@ -143,6 +143,12 @@
color: color-mix(in oklab, var(--accent) 70%, canvasText 30%);
min-height: 16px;
}
.status[data-kind='ok'] {
color: color-mix(in oklab, #16a34a 75%, canvasText 25%);
}
.status[data-kind='error'] {
color: color-mix(in oklab, #ef4444 75%, canvasText 25%);
}
</style>
</head>
<body>

View File

@@ -13,11 +13,37 @@ function updateRelayUrl(port) {
el.textContent = `http://127.0.0.1:${port}/`
}
function setStatus(kind, message) {
const status = document.getElementById('status')
if (!status) return
status.dataset.kind = kind || ''
status.textContent = message || ''
}
async function checkRelayReachable(port) {
const url = `http://127.0.0.1:${port}/`
const ctrl = new AbortController()
const t = setTimeout(() => ctrl.abort(), 900)
try {
const res = await fetch(url, { method: 'HEAD', signal: ctrl.signal })
if (!res.ok) throw new Error(`HTTP ${res.status}`)
setStatus('ok', `Relay reachable at ${url}`)
} catch {
setStatus(
'error',
`Relay not reachable at ${url}. Start Clawdbots browser relay on this machine, then click the toolbar button again.`,
)
} finally {
clearTimeout(t)
}
}
async function load() {
const stored = await chrome.storage.local.get(['relayPort'])
const port = clampPort(stored.relayPort)
document.getElementById('port').value = String(port)
updateRelayUrl(port)
await checkRelayReachable(port)
}
async function save() {
@@ -26,11 +52,7 @@ async function save() {
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(() => {
status.textContent = ''
}, 2000)
await checkRelayReachable(port)
}
document.getElementById('save').addEventListener('click', () => void save())