OpenClaw Chrome 扩展：Browser Relay 配置

七夜zippoe2026-05-21 8:32

目录

    • 摘要
    • [1. 引言 - 为什么需要 Chrome 扩展？](#1. 引言 - 为什么需要 Chrome 扩展？)
      • [1.1 Chrome 扩展模式的优势](#1.1 Chrome 扩展模式的优势)
      • [1.2 Browser Relay 架构](#1.2 Browser Relay 架构)
      • [1.3 适用场景](#1.3 适用场景)
    • [2. 扩展安装](#2. 扩展安装)
      • [2.1 安装步骤](#2.1 安装步骤)
      • [2.2 详细安装指南](#2.2 详细安装指南)
      • [2.3 扩展权限](#2.3 扩展权限)
    • [3. 扩展配置](#3. 扩展配置)
      • [3.1 基本配置](#3.1 基本配置)
      • [3.2 连接配置](#3.2 连接配置)
      • [3.3 配置选项](#3.3 配置选项)
    • [4. 使用流程](#4. 使用流程)
      • [4.1 激活扩展](#4.1 激活扩展)
      • [4.2 操作步骤](#4.2 操作步骤)
      • [4.3 状态指示](#4.3 状态指示)
    • [5. 多标签页管理](#5. 多标签页管理)
      • [5.1 标签页状态](#5.1 标签页状态)
      • [5.2 切换标签页](#5.2 切换标签页)
      • [5.3 打开新标签页](#5.3 打开新标签页)
      • [5.4 关闭标签页](#5.4 关闭标签页)
    • [6. 实战案例](#6. 实战案例)
      • [6.1 案例一：已登录网站操作](#6.1 案例一：已登录网站操作)
      • [6.2 案例二：内部系统访问](#6.2 案例二：内部系统访问)
      • [6.3 案例三：多标签页协作](#6.3 案例三：多标签页协作)
    • [7. 安全注意事项](#7. 安全注意事项)
      • [7.1 安全风险](#7.1 安全风险)
      • [7.2 安全配置](#7.2 安全配置)
      • [7.3 操作确认](#7.3 操作确认)
      • [7.4 最佳安全实践](#7.4 最佳安全实践)
    • [8. 故障排除](#8. 故障排除)
      • [8.1 常见问题](#8.1 常见问题)
      • [8.2 调试方法](#8.2 调试方法)
      • [8.3 重置扩展](#8.3 重置扩展)
    • [9. 与内置浏览器对比](#9. 与内置浏览器对比)
      • [9.1 功能对比](#9.1 功能对比)
      • [9.2 选择建议](#9.2 选择建议)
    • [10. 总结](#10. 总结)
      • [10.1 核心要点](#10.1 核心要点)
      • [10.2 配置清单](#10.2 配置清单)
      • [10.3 下一步](#10.3 下一步)
    • 参考资料

摘要

本文详细介绍 OpenClaw Browser Relay Chrome 扩展的配置与使用。从扩展安装、权限配置、标签页连接到实际操作，全面解析如何通过 Chrome 扩展控制用户现有浏览器。通过实际案例演示扩展激活、多标签页管理、安全注意事项等关键内容，帮助开发者实现无缝的浏览器自动化体验。🔌

1. 引言 - 为什么需要 Chrome 扩展？

1.1 Chrome 扩展模式的优势

优势 说明 对比内置浏览器
使用现有会话 复用已登录状态 无需重新登录
真实用户环境 使用用户真实浏览器 独立环境
扩展生态 可使用其他扩展 功能受限
调试方便 可直接查看操作 需要额外工具

1.2 Browser Relay 架构

通信
Chrome
OpenClaw
AI Agent
Browser Tool
Browser Relay 扩展
标签页控制
用户现有标签页
WebSocket

1.3 适用场景

场景 说明
已登录网站操作 无需重新登录
内部系统访问 使用企业内网环境
真实用户测试 模拟真实用户操作
现有工作流集成 在现有浏览器中操作

2. 扩展安装

2.1 安装步骤

下载扩展
打开扩展管理
启用开发者模式
加载已解压扩展
确认安装成功

2.2 详细安装指南

步骤1：下载扩展

从 OpenClaw 官方渠道下载 Browser Relay 扩展包。

步骤2：打开扩展管理

复制代码 
Chrome 菜单 → 更多工具 → 扩展程序
或直接访问：chrome://extensions/

步骤3：启用开发者模式

在扩展管理页面右上角，启用"开发者模式"开关。

步骤4：加载扩展

点击"加载已解压的扩展程序"，选择解压后的扩展目录。

步骤5：确认安装

扩展列表中出现 "OpenClaw Browser Relay" 表示安装成功。

2.3 扩展权限

权限 说明 用途
tabs 标签页访问 控制标签页
activeTab 当前标签页 操作当前页面
scripting 脚本注入 执行页面脚本
storage 本地存储 保存配置

3. 扩展配置

3.1 基本配置

json 复制代码 
{
  "name": "OpenClaw Browser Relay",
  "version": "1.0.0",
  "permissions": [
    "tabs",
    "activeTab",
    "scripting",
    "storage"
  ],
  "host_permissions": [
    "<all_urls>"
  ],
  "background": {
    "service_worker": "background.js"
  }
}

3.2 连接配置

javascript 复制代码 
// background.js
const GATEWAY_URL = "ws://localhost:18880";

// 连接 Gateway
const ws = new WebSocket(GATEWAY_URL);

ws.onopen = () => {
  console.log("Connected to OpenClaw Gateway");
};

ws.onmessage = (event) => {
  const command = JSON.parse(event.data);
  handleCommand(command);
};

3.3 配置选项

选项 说明 默认值
Gateway URL Gateway 地址 ws://localhost:18880
Auto Connect 自动连接 true
Debug Mode 调试模式 false

4. 使用流程

4.1 激活扩展

OFF
ON
打开目标网页
点击扩展图标
Badge状态
点击激活
已激活
Badge变为ON
可以开始操作

4.2 操作步骤

步骤1：打开目标网页

在 Chrome 中打开需要操作的网页。

步骤2：激活扩展

点击扩展图标，确认 Badge 显示 "ON"。

步骤3：AI 操作

AI Agent 现在可以控制该标签页。

4.3 状态指示

Badge 状态 说明
OFF 未激活 扩展未连接该标签页
ON 已激活 扩展已连接，可操作
ERR 错误 连接错误

5. 多标签页管理

5.1 标签页状态

python 复制代码 
# 获取所有标签页
tabs = browser(action="tabs", profile="chrome")

# 返回示例
{
  "tabs": [
    {
      "id": "ABC123",
      "url": "https://example.com",
      "title": "Example",
      "active": true,
      "connected": true
    },
    {
      "id": "DEF456",
      "url": "https://google.com",
      "title": "Google",
      "active": false,
      "connected": false
    }
  ]
}

5.2 切换标签页

python 复制代码 
# 切换到指定标签页
browser(
    action="focus",
    targetId="DEF456",
    profile="chrome"
)

5.3 打开新标签页

python 复制代码 
# 在新标签页打开网页
browser(
    action="open",
    targetUrl="https://example.com",
    profile="chrome"
)

5.4 关闭标签页

python 复制代码 
# 关闭指定标签页
browser(
    action="close",
    targetId="DEF456",
    profile="chrome"
)

6. 实战案例

6.1 案例一：已登录网站操作

场景：用户已登录某网站，需要自动执行操作

python 复制代码 
def operate_logged_in_site():
    """操作已登录网站"""
    # 1. 使用 Chrome 扩展模式
    browser(action="start", profile="chrome")
    
    # 2. 用户已在浏览器中登录
    # 直接获取当前标签页快照
    snapshot = browser(
        action="snapshot",
        profile="chrome"
    )
    
    # 3. 执行操作（如点击按钮）
    target_btn = find_element(snapshot, "button", "操作")
    
    browser(
        action="act",
        kind="click",
        ref=target_btn["ref"],
        profile="chrome"
    )
    
    # 4. 无需重新登录，直接使用现有会话

6.2 案例二：内部系统访问

场景：访问企业内部系统，需要使用内网环境

python 复制代码 
def access_internal_system():
    """访问内部系统"""
    # Chrome 扩展使用用户真实环境
    # 包括企业内网、VPN 等
    
    browser(
        action="open",
        targetUrl="http://internal.company.com",
        profile="chrome"
    )
    
    # 等待加载
    browser(action="act", kind="wait", timeMs=3000)
    
    # 获取快照
    snapshot = browser(
        action="snapshot",
        profile="chrome"
    )
    
    # 执行内部系统操作
    # ...

6.3 案例三：多标签页协作

场景：在多个标签页之间切换操作

python 复制代码 
def multi_tab_operation():
    """多标签页操作"""
    # 1. 获取所有标签页
    tabs = browser(action="tabs", profile="chrome")
    
    # 2. 在标签页A操作
    browser(
        action="focus",
        targetId=tabs["tabs"][0]["id"],
        profile="chrome"
    )
    
    data_a = extract_data_from_current_tab()
    
    # 3. 切换到标签页B
    browser(
        action="focus",
        targetId=tabs["tabs"][1]["id"],
        profile="chrome"
    )
    
    # 4. 使用标签页A的数据在标签页B操作
    fill_form_with_data(data_a)

7. 安全注意事项

7.1 安全风险

风险 说明 防护措施
敏感页面 银行、支付等页面 限制敏感域名
数据泄露 页面数据被读取 权限控制
恶意操作 执行危险操作 操作审计
会话劫持 会话被滥用 连接验证

7.2 安全配置

json 复制代码 
{
  "security": {
    "allowedDomains": [
      "example.com",
      "*.company.com"
    ],
    "blockedDomains": [
      "bank.*",
      "*payment*"
    ],
    "requireConfirmation": true,
    "auditLog": true
  }
}

7.3 操作确认

python 复制代码 
def safe_operation(operation):
    """安全操作"""
    # 检查当前域名
    current_url = get_current_url()
    
    if is_sensitive_domain(current_url):
        # 请求用户确认
        confirmed = request_user_confirmation(
            f"即将在敏感页面执行操作: {operation}"
        )
        
        if not confirmed:
            raise Exception("用户取消操作")
    
    # 记录审计日志
    log_audit(operation)
    
    # 执行操作
    return execute_operation(operation)

7.4 最佳安全实践

实践 说明
限制域名 只允许特定域名
用户确认 敏感操作需确认
审计日志 记录所有操作
定期审查 检查操作历史

8. 故障排除

8.1 常见问题

问题 原因 解决方案
Badge 不变 ON 扩展未激活 点击扩展图标激活
连接失败 Gateway 未启动 启动 Gateway 服务
操作无响应 标签页未连接 重新激活扩展
权限错误 权限不足 检查扩展权限

8.2 调试方法

javascript 复制代码 
// 查看扩展日志
// chrome://extensions/
// 点击扩展的 "查看视图" 链接

// 检查连接状态
console.log("Connection status:", ws.readyState);
// 0: CONNECTING, 1: OPEN, 2: CLOSING, 3: CLOSED

8.3 重置扩展

python 复制代码 
def reset_extension():
    """重置扩展"""
    # 1. 停止浏览器
    browser(action="stop", profile="chrome")
    
    # 2. 清除缓存
    # 在扩展管理页面点击"清除缓存"
    
    # 3. 重新启动
    browser(action="start", profile="chrome")

9. 与内置浏览器对比

9.1 功能对比

功能 Chrome 扩展 内置浏览器
使用现有会话 ✅ ❌
独立环境 ❌ ✅
扩展支持 ✅ ❌
无需安装 ❌ ✅
调试方便 ✅ ⚠️

9.2 选择建议

场景 推荐
已登录网站操作 Chrome 扩展
内部系统访问 Chrome 扩展
自动化测试 内置浏览器
数据采集 内置浏览器
真实用户模拟 Chrome 扩展

10. 总结

10.1 核心要点

要点 说明
激活扩展 操作前必须激活
Badge 状态 ON 表示已连接
安全注意 限制敏感域名
故障排查 检查连接状态

10.2 配置清单

  • 安装扩展
  • 配置权限
  • 设置 Gateway 地址
  • 测试连接
  • 配置安全规则

10.3 下一步

  • 第50篇：OpenClaw 网页抓取：数据采集实战
  • 第51篇：OpenClaw Canvas：可视化界面入门

参考资料

相关推荐
之歆5 小时前
DAY_12JavaScript DOM 完全指南（三）：高级工程篇
开发语言·前端·javascript·ecmascript
来恩10035 小时前
EL表达式应用
前端·javascript·vue.js
希冀1235 小时前
【CSS学习第十篇】
前端·css
小飞侠是个胖子5 小时前
在 WebGL 中构建高性能 3D 沉浸式系统的三套高阶方案
前端·3d
wh_xia_jun5 小时前
Vue3 + Vitest 浏览器测试 从零开发指南
前端·javascript·vue.js
FlyWIHTSKY5 小时前
区块链前端技术栈介绍
前端·区块链
唐青枫5 小时前
别再让 key 写成字符串：TypeScript keyof 从入门到实战
前端·javascript·typescript
一点一木13 小时前
深度体验TRAE SOLO移动端7天：作为独立开发者，我把工作流揣进了兜里
前端·人工智能·trae
天外飞雨道沧桑13 小时前
TypeScript 中 omit 和 record 用法
前端·javascript·typescript
热门推荐
01GitHub 镜像站点02Codex 接入 DeepSeek API 完整配置文档03CC-Switch & Claude 基于 Linux 服务器安装使用指南04裂开！ChatGPT 居然开始要手机号验证，附详细解决方法05几个好用的ip纯净度检测网站06用了半年 OpenRouter，我换到了 Ofox.ai — 两个 AI API 聚合平台的真实对比07【AI】2026 年具身智能模型和世界模型总结08【踩坑记录 | 第一篇】微软商店无法使用时，如何手动安装 OpenAI Codex？附`.msix`文件系统错误解决方法09装上就回不去了：CodeGraph 让 AI 编程效率飙升 92%，它到底做了什么？10codex app每次打开重连5次Reconnecting问题解决