TDL的个人笔记

切换主题

OpenClaw Chrome 扩展配置教程：让 AI 控制你的浏览器标签页 ​

什么是 Chrome Extension（浏览器中继） ​

OpenClaw 的 Chrome 扩展允许 AI 助手直接控制你 现有的 Chrome 标签页，而不是启动一个隔离的浏览器实例。

通过 Chrome 工具栏按钮一键附加/解除，AI 就能：

  • 读取当前页面的内容
  • 在页面中点击、输入、导航
  • 操作该标签页能访问的一切内容

架构原理 ​

整个系统由三部分组成：

  1. 浏览器控制服务（Gateway）：AI 调用的 API 接口
  2. 本地中继服务器（Loopback CDP）：桥接控制服务与扩展，默认端口 127.0.0.1:18792
  3. Chrome MV3 扩展：通过 chrome.debugger API 附加到标签页，将 CDP 消息转发给中继
AI 助手 → Gateway API → 中继服务器 → Chrome 扩展 → 你的标签页

安装步骤 ​

1. 安装扩展文件 ​

bash
openclaw browser extension install

文件会被安装到 ~/.qclaw/browser/chrome-extension 目录。

2. 获取扩展目录路径 ​

bash
openclaw browser extension path

记住输出的路径，下一步要用。

3. 加载到 Chrome ​

  1. 打开 Chrome，地址栏输入 chrome://extensions
  2. 右上角开启 「开发者模式」
  3. 点击 「加载已解压的扩展程序」
  4. 选择上一步输出的目录（例如 ~/.qclaw/browser/chrome-extension）
  5. 将扩展 固定到工具栏

4. 配置扩展 ​

右键点击扩展图标 → 选项（Options），填写：

配置项说明示例值
Port中继端口，默认为 1879218792
Gateway token必须与 gateway.auth.token 一致从配置文件获取

端口计算规则

如果你的 Gateway 使用了自定义端口，扩展中继端口 = Gateway 端口 + 3。

例如：Gateway 端口 28789 → 中继端口 28792

5. 获取 Gateway Token ​

打开你的 OpenClaw 配置文件：

bash
# macOS 默认路径
cat ~/.qclaw/openclaw.json

找到 gateway.auth.token 字段，复制其值填入扩展 Options 页面。

使用方法 ​

附加标签页 ​

  1. 在 Chrome 中打开你想让 AI 控制的标签页
  2. 点击工具栏上的扩展图标
  3. Badge 显示 ON 表示已成功附加

解除附加 ​

再次点击扩展图标即可解除，Badge 恢复默认状态。

AI 侧调用 ​

AI 助手通过 browser 工具，使用 profile="chrome-relay" 来操作附加的标签页。

Badge 状态说明 ​

状态含义
ON已附加，AI 可以控制该标签页
…正在连接中继服务器
!中继不可达或认证失败

遇到 ! 时的排查 ​

  1. 确认 Gateway 正在运行
  2. 检查扩展 Options 中的 Port 和 Token 是否正确
  3. 如果 Gateway 运行在远程机器上，需要在本地运行 node host

升级扩展 ​

OpenClaw 升级后，扩展文件也需要更新：

  1. 重新运行 openclaw browser extension install 刷新文件
  2. 进入 chrome://extensions → 点击扩展的 「重新加载」 按钮

安全提醒 ​

注意

Chrome 扩展使用 chrome.debugger API，附加后 AI 可以：

  • 在标签页中点击、输入、导航
  • 读取页面内容
  • 访问该标签页已登录的账户资源

这意味着附加到日常浏览器标签页时，AI 可以访问你的登录态。

建议：

  • 使用 独立的 Chrome 配置文件 来配合扩展使用，与日常浏览隔离
  • 中继端口保持在 127.0.0.1（loopback），不要暴露到局域网
  • 通过 Tailscale 等私有网络通信

总结 ​

配置完成后，你只需在 Chrome 中点击扩展图标附加标签页，AI 就能直接看到和操作你的网页了。整个过程无需安装额外软件，一个扩展搞定。