Discord

src/extensions/browser-relay/SETUP.md

@@ -0,0 +1,45 @@
+# Officer Browser Relay — Setup Guide
+
+## Prerequisites
+- Officer server running (`bun dev`)
+- Google Chrome or Chromium-based browser on your machine
+- Both machines on the same Tailscale network (or localhost for local dev)
+
+## Steps
+
+### 1. Verify relay is running
+Check the server logs for `[browser-relay] listening on port 18792`.
+
+### 2. Get your relay credentials
+Open Officer dashboard → **Browser** screen (or `/browser`).
+The setup card shows your **server address**, **port**, and **relay token**.
+
+### 3. Load the extension in Chrome
+1. Open `chrome://extensions`
+2. Enable **Developer mode** (top-right toggle)
+3. Click **Load unpacked**
+4. Select `src/extensions/browser-relay/`
+
+### 4. Configure the extension
+1. The options page opens automatically after install (or right-click extension → Options)
+2. Enter the **Server address** (Officer's IP — e.g. your Tailscale IP, or `127.0.0.1` for local)
+3. Enter the **Port** (default `18792`)
+4. Paste your **Relay token** from step 2
+5. Click **Save** — status should show green "Relay reachable and authenticated"
+
+### 5. Attach a tab
+1. Navigate to any webpage in Chrome
+2. Click the Officer Browser Relay extension icon in the toolbar
+3. Badge shows **ON** (cyan) = attached
+
+### 6. Use from the dashboard
+1. Open `/browser` in Officer
+2. Your attached tab appears in the left panel
+3. Click it to see a live screenshot in the right panel
+4. Use the URL bar to navigate, or the JS console to evaluate expressions
+
+## Troubleshooting
+- **Red `!` badge**: Relay not reachable — check server address/port/token
+- **`…` badge**: Reconnecting — relay was temporarily unavailable
+- **Tab not appearing**: Make sure the extension badge shows ON, and refresh the dashboard
+- **Screenshot blank**: The tab may be on a `chrome://` page (not supported by CDP)