Implementation:Openclaw Openclaw Chrome Extension Options

Knowledge Sources	Openclaw_Openclaw Chrome Storage API
Domains	Browser_Automation, Chrome_Extension, Configuration_UI
Last Updated	2026-02-06 12:00 GMT

Overview

Options page script for the OpenClaw Chrome Extension that provides relay port configuration and connection status checking.

Description

The options.js script powers the Chrome Extension's options page, where users configure which local port the extension connects to for the CDP relay server. It validates port input, persists the value to Chrome local storage, displays the computed relay URL, and performs a live reachability check against the relay server.

Usage

This script loads automatically when the user opens the extension's options page (via right-click on the extension icon or `chrome.runtime.openOptionsPage()`). It is also opened automatically on first install and when the relay connection fails, guiding the user to configure the correct port.

Code Reference

Source Location

• Repository: Openclaw_Openclaw
• File: assets/chrome-extension/options.js
• Lines: 1-59

Signature

function clampPort(value)
// Validates and clamps a port value to valid range (1-65535).
// Returns DEFAULT_PORT (18792) if invalid.
// Params: value — any (string or number from input)
// Returns: number

function updateRelayUrl(port)
// Updates the relay URL display element to show http://127.0.0.1:{port}/
// Params: port — number

function setStatus(kind, message)
// Sets the status indicator element with a kind ('ok'|'error') and message.
// Params: kind — string, message — string

async function checkRelayReachable(port)
// Performs an HTTP HEAD request to http://127.0.0.1:{port}/ with 900ms timeout.
// Updates status display to 'ok' or 'error'.
// Params: port — number

async function load()
// Loads saved port from chrome.storage.local, populates input, checks reachability.

async function save()
// Reads port from input, validates, saves to chrome.storage.local, checks reachability.

Import

// Loaded as a script in the extension's options.html page:
// <script src="options.js"></script>
// No explicit import; runs in the options page context.

I/O Contract

Inputs

Name	Type	Required	Description
relayPort	number (chrome.storage.local)	No	Previously saved relay port (default 18792)
port input	HTMLInputElement value	Yes	User-entered port number from the options form

Outputs

Name	Type	Description
relayPort	chrome.storage.local	Persisted port configuration
relay-url display	DOM textContent	Shows computed relay URL (http://127.0.0.1:{port}/)
status display	DOM textContent + dataset.kind	Shows relay reachability status ('ok' or 'error')

Usage Examples

Options Page Lifecycle

// On page load:
// 1. load() reads chrome.storage.local['relayPort']
// 2. clampPort() validates (defaults to 18792 if missing/invalid)
// 3. Populates input field, updates relay URL display
// 4. checkRelayReachable() does HTTP HEAD to http://127.0.0.1:18792/
// 5. Shows "Relay reachable" or "Relay not reachable" status

// When user changes port and clicks Save:
// 1. save() reads input value
// 2. clampPort() validates
// 3. Persists to chrome.storage.local
// 4. checkRelayReachable() verifies new port

Related Pages

• Environment:Openclaw_Openclaw_Gateway_Network_Ports