46 lines
1.8 KiB
Markdown
46 lines
1.8 KiB
Markdown
# 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)
|