feat: improve extension options diagnostics
This commit is contained in:
@@ -143,6 +143,12 @@
|
|||||||
color: color-mix(in oklab, var(--accent) 70%, canvasText 30%);
|
color: color-mix(in oklab, var(--accent) 70%, canvasText 30%);
|
||||||
min-height: 16px;
|
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>
|
</style>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
|
|||||||
@@ -13,11 +13,37 @@ function updateRelayUrl(port) {
|
|||||||
el.textContent = `http://127.0.0.1:${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 Clawdbot’s browser relay on this machine, then click the toolbar button again.`,
|
||||||
|
)
|
||||||
|
} finally {
|
||||||
|
clearTimeout(t)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
async function load() {
|
async function load() {
|
||||||
const stored = await chrome.storage.local.get(['relayPort'])
|
const stored = await chrome.storage.local.get(['relayPort'])
|
||||||
const port = clampPort(stored.relayPort)
|
const port = clampPort(stored.relayPort)
|
||||||
document.getElementById('port').value = String(port)
|
document.getElementById('port').value = String(port)
|
||||||
updateRelayUrl(port)
|
updateRelayUrl(port)
|
||||||
|
await checkRelayReachable(port)
|
||||||
}
|
}
|
||||||
|
|
||||||
async function save() {
|
async function save() {
|
||||||
@@ -26,11 +52,7 @@ async function save() {
|
|||||||
await chrome.storage.local.set({ relayPort: port })
|
await chrome.storage.local.set({ relayPort: port })
|
||||||
input.value = String(port)
|
input.value = String(port)
|
||||||
updateRelayUrl(port)
|
updateRelayUrl(port)
|
||||||
const status = document.getElementById('status')
|
await checkRelayReachable(port)
|
||||||
status.textContent = `Saved. Using http://127.0.0.1:${port}/`
|
|
||||||
setTimeout(() => {
|
|
||||||
status.textContent = ''
|
|
||||||
}, 2000)
|
|
||||||
}
|
}
|
||||||
|
|
||||||
document.getElementById('save').addEventListener('click', () => void save())
|
document.getElementById('save').addEventListener('click', () => void save())
|
||||||
|
|||||||
Reference in New Issue
Block a user