2026-01-15 04:50:11 +00:00
|
|
|
|
<!doctype html>
|
|
|
|
|
|
<html lang="en">
|
|
|
|
|
|
<head>
|
|
|
|
|
|
<meta charset="utf-8" />
|
|
|
|
|
|
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
2026-01-30 03:15:10 +01:00
|
|
|
|
<title>OpenClaw Browser Relay</title>
|
2026-01-15 04:50:11 +00:00
|
|
|
|
<style>
|
|
|
|
|
|
:root {
|
|
|
|
|
|
color-scheme: light dark;
|
2026-01-15 05:10:57 +00:00
|
|
|
|
--accent: #ff5a36;
|
|
|
|
|
|
--panel: color-mix(in oklab, canvas 92%, canvasText 8%);
|
|
|
|
|
|
--border: color-mix(in oklab, canvasText 18%, transparent);
|
|
|
|
|
|
--muted: color-mix(in oklab, canvasText 70%, transparent);
|
|
|
|
|
|
--shadow: 0 10px 30px color-mix(in oklab, canvasText 18%, transparent);
|
|
|
|
|
|
font-family: ui-rounded, system-ui, -apple-system, BlinkMacSystemFont, "SF Pro Rounded",
|
|
|
|
|
|
"SF Pro Display", "Segoe UI", sans-serif;
|
2026-01-15 04:50:11 +00:00
|
|
|
|
line-height: 1.4;
|
|
|
|
|
|
}
|
|
|
|
|
|
body {
|
2026-01-15 05:10:57 +00:00
|
|
|
|
margin: 0;
|
|
|
|
|
|
min-height: 100vh;
|
|
|
|
|
|
background:
|
|
|
|
|
|
radial-gradient(1000px 500px at 10% 0%, color-mix(in oklab, var(--accent) 30%, transparent), transparent 70%),
|
|
|
|
|
|
radial-gradient(900px 450px at 90% 0%, color-mix(in oklab, var(--accent) 18%, transparent), transparent 75%),
|
|
|
|
|
|
canvas;
|
|
|
|
|
|
color: canvasText;
|
|
|
|
|
|
}
|
|
|
|
|
|
.wrap {
|
|
|
|
|
|
max-width: 820px;
|
|
|
|
|
|
margin: 36px auto;
|
|
|
|
|
|
padding: 0 24px 48px 24px;
|
|
|
|
|
|
}
|
|
|
|
|
|
header {
|
|
|
|
|
|
display: flex;
|
|
|
|
|
|
align-items: center;
|
|
|
|
|
|
gap: 12px;
|
|
|
|
|
|
margin-bottom: 18px;
|
|
|
|
|
|
}
|
|
|
|
|
|
.logo {
|
|
|
|
|
|
width: 44px;
|
|
|
|
|
|
height: 44px;
|
|
|
|
|
|
border-radius: 14px;
|
|
|
|
|
|
background: color-mix(in oklab, var(--accent) 18%, transparent);
|
|
|
|
|
|
border: 1px solid color-mix(in oklab, var(--accent) 35%, transparent);
|
|
|
|
|
|
box-shadow: var(--shadow);
|
|
|
|
|
|
display: grid;
|
|
|
|
|
|
place-items: center;
|
|
|
|
|
|
}
|
|
|
|
|
|
.logo img {
|
|
|
|
|
|
width: 28px;
|
|
|
|
|
|
height: 28px;
|
|
|
|
|
|
image-rendering: pixelated;
|
2026-01-15 04:50:11 +00:00
|
|
|
|
}
|
|
|
|
|
|
h1 {
|
2026-01-15 05:10:57 +00:00
|
|
|
|
font-size: 20px;
|
|
|
|
|
|
margin: 0;
|
|
|
|
|
|
letter-spacing: -0.01em;
|
|
|
|
|
|
}
|
|
|
|
|
|
.subtitle {
|
|
|
|
|
|
margin: 2px 0 0 0;
|
|
|
|
|
|
color: var(--muted);
|
|
|
|
|
|
font-size: 13px;
|
|
|
|
|
|
}
|
|
|
|
|
|
.grid {
|
|
|
|
|
|
display: grid;
|
|
|
|
|
|
grid-template-columns: 1fr;
|
|
|
|
|
|
gap: 14px;
|
|
|
|
|
|
}
|
|
|
|
|
|
.card {
|
|
|
|
|
|
background: var(--panel);
|
|
|
|
|
|
border: 1px solid var(--border);
|
|
|
|
|
|
border-radius: 16px;
|
|
|
|
|
|
padding: 16px;
|
|
|
|
|
|
box-shadow: var(--shadow);
|
|
|
|
|
|
}
|
|
|
|
|
|
.card h2 {
|
|
|
|
|
|
margin: 0 0 10px 0;
|
|
|
|
|
|
font-size: 14px;
|
|
|
|
|
|
letter-spacing: 0.01em;
|
|
|
|
|
|
}
|
|
|
|
|
|
.card p {
|
|
|
|
|
|
margin: 8px 0 0 0;
|
|
|
|
|
|
color: var(--muted);
|
|
|
|
|
|
font-size: 13px;
|
|
|
|
|
|
}
|
|
|
|
|
|
.row {
|
|
|
|
|
|
display: flex;
|
|
|
|
|
|
align-items: center;
|
|
|
|
|
|
gap: 8px;
|
|
|
|
|
|
flex-wrap: wrap;
|
2026-01-15 04:50:11 +00:00
|
|
|
|
}
|
|
|
|
|
|
label {
|
|
|
|
|
|
display: block;
|
|
|
|
|
|
font-size: 12px;
|
2026-01-15 05:10:57 +00:00
|
|
|
|
color: var(--muted);
|
2026-01-15 04:50:11 +00:00
|
|
|
|
margin-bottom: 6px;
|
|
|
|
|
|
}
|
|
|
|
|
|
input {
|
2026-01-15 05:10:57 +00:00
|
|
|
|
width: 160px;
|
|
|
|
|
|
padding: 10px 12px;
|
|
|
|
|
|
border-radius: 12px;
|
|
|
|
|
|
border: 1px solid var(--border);
|
|
|
|
|
|
background: color-mix(in oklab, canvas 92%, canvasText 8%);
|
|
|
|
|
|
color: canvasText;
|
|
|
|
|
|
outline: none;
|
|
|
|
|
|
}
|
|
|
|
|
|
input:focus {
|
|
|
|
|
|
border-color: color-mix(in oklab, var(--accent) 70%, transparent);
|
|
|
|
|
|
box-shadow: 0 0 0 4px color-mix(in oklab, var(--accent) 20%, transparent);
|
2026-01-15 04:50:11 +00:00
|
|
|
|
}
|
|
|
|
|
|
button {
|
2026-01-15 05:10:57 +00:00
|
|
|
|
padding: 10px 14px;
|
|
|
|
|
|
border-radius: 12px;
|
|
|
|
|
|
border: 1px solid color-mix(in oklab, var(--accent) 55%, transparent);
|
|
|
|
|
|
background: linear-gradient(
|
|
|
|
|
|
180deg,
|
|
|
|
|
|
color-mix(in oklab, var(--accent) 80%, white 20%),
|
|
|
|
|
|
var(--accent)
|
|
|
|
|
|
);
|
|
|
|
|
|
color: white;
|
|
|
|
|
|
font-weight: 650;
|
|
|
|
|
|
letter-spacing: 0.01em;
|
2026-01-15 04:50:11 +00:00
|
|
|
|
cursor: pointer;
|
|
|
|
|
|
}
|
2026-01-15 05:10:57 +00:00
|
|
|
|
button:active {
|
|
|
|
|
|
transform: translateY(1px);
|
2026-01-15 04:50:11 +00:00
|
|
|
|
}
|
|
|
|
|
|
.hint {
|
2026-01-15 05:10:57 +00:00
|
|
|
|
margin-top: 10px;
|
2026-01-15 04:50:11 +00:00
|
|
|
|
font-size: 12px;
|
2026-01-15 05:10:57 +00:00
|
|
|
|
color: var(--muted);
|
2026-01-15 04:50:11 +00:00
|
|
|
|
}
|
|
|
|
|
|
code {
|
2026-01-15 05:10:57 +00:00
|
|
|
|
font-family: ui-monospace, Menlo, Monaco, Consolas, "SF Mono", monospace;
|
|
|
|
|
|
font-size: 12px;
|
|
|
|
|
|
}
|
|
|
|
|
|
a {
|
|
|
|
|
|
color: color-mix(in oklab, var(--accent) 85%, canvasText 15%);
|
|
|
|
|
|
}
|
|
|
|
|
|
.status {
|
|
|
|
|
|
margin-top: 10px;
|
|
|
|
|
|
font-size: 12px;
|
|
|
|
|
|
color: color-mix(in oklab, var(--accent) 70%, canvasText 30%);
|
|
|
|
|
|
min-height: 16px;
|
2026-01-15 04:50:11 +00:00
|
|
|
|
}
|
2026-01-15 05:15:33 +00:00
|
|
|
|
.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%);
|
|
|
|
|
|
}
|
2026-01-15 04:50:11 +00:00
|
|
|
|
</style>
|
|
|
|
|
|
</head>
|
|
|
|
|
|
<body>
|
2026-01-15 05:10:57 +00:00
|
|
|
|
<div class="wrap">
|
|
|
|
|
|
<header>
|
|
|
|
|
|
<div class="logo" aria-hidden="true">
|
|
|
|
|
|
<img src="icons/icon128.png" alt="" />
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<div>
|
2026-01-30 03:15:10 +01:00
|
|
|
|
<h1>OpenClaw Browser Relay</h1>
|
2026-01-15 05:10:57 +00:00
|
|
|
|
<p class="subtitle">Click the toolbar button on a tab to attach / detach.</p>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</header>
|
2026-01-15 04:50:11 +00:00
|
|
|
|
|
2026-01-15 05:10:57 +00:00
|
|
|
|
<div class="grid">
|
|
|
|
|
|
<div class="card">
|
|
|
|
|
|
<h2>Getting started</h2>
|
|
|
|
|
|
<p>
|
|
|
|
|
|
If you see a red <code>!</code> badge on the extension icon, the relay server is not reachable.
|
2026-01-30 03:15:10 +01:00
|
|
|
|
Start OpenClaw’s browser relay on this machine (Gateway or node host), then click the toolbar button again.
|
2026-01-15 05:10:57 +00:00
|
|
|
|
</p>
|
|
|
|
|
|
<p>
|
2026-01-30 03:15:10 +01:00
|
|
|
|
Full guide (install, remote Gateway, security): <a href="https://docs.openclaw.ai/tools/chrome-extension" target="_blank" rel="noreferrer">docs.openclaw.ai/tools/chrome-extension</a>
|
2026-01-15 05:10:57 +00:00
|
|
|
|
</p>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
|
|
<div class="card">
|
2026-02-19 08:39:34 +01:00
|
|
|
|
<h2>Relay connection</h2>
|
2026-01-15 05:10:57 +00:00
|
|
|
|
<label for="port">Port</label>
|
|
|
|
|
|
<div class="row">
|
|
|
|
|
|
<input id="port" inputmode="numeric" pattern="[0-9]*" />
|
2026-02-19 08:39:34 +01:00
|
|
|
|
</div>
|
|
|
|
|
|
<label for="token" style="margin-top: 10px">Gateway token</label>
|
|
|
|
|
|
<div class="row">
|
|
|
|
|
|
<input id="token" type="password" autocomplete="off" style="width: min(520px, 100%)" />
|
2026-01-15 05:10:57 +00:00
|
|
|
|
<button id="save" type="button">Save</button>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<div class="hint">
|
2026-02-19 08:39:34 +01:00
|
|
|
|
Default port: <code>18792</code>. Extension connects to: <code id="relay-url">http://127.0.0.1:<port>/</code>.
|
|
|
|
|
|
Gateway token must match <code>gateway.auth.token</code> (or <code>OPENCLAW_GATEWAY_TOKEN</code>).
|
2026-01-15 05:10:57 +00:00
|
|
|
|
</div>
|
|
|
|
|
|
<div class="status" id="status"></div>
|
|
|
|
|
|
</div>
|
2026-01-15 04:50:11 +00:00
|
|
|
|
</div>
|
|
|
|
|
|
|
2026-01-15 05:10:57 +00:00
|
|
|
|
<script type="module" src="options.js"></script>
|
|
|
|
|
|
</div>
|
2026-01-15 04:50:11 +00:00
|
|
|
|
</body>
|
|
|
|
|
|
</html>
|
