AI 也能操控浏览器了?OpenClaw Browser Relay 接入指南

AI 也能操控浏览器了?OpenClaw Browser Relay 接入指南

目录


为什么需要 Browser Relay?

兄弟姐妹们,有没有这些痛点:

😭 想自动化操作浏览器,但工具配置复杂、代码一大串还容易报错
😭 页面稍微变一下,脚本就失效,维护到头秃
😭 遇到登录态、Cookie、JavaScript 渲染的页面,直接歇菜

好消息来了! 🎉

OpenClaw Browser Relay 直接用 AI 控制浏览器!不用记 API、不用写复杂脚本,只要会说话(打字)就行!从此以后:

从此以后:

✅ “帮我去某某网站查个数据” —— AI 自动打开浏览器、登录、查询、返回结果
✅ “把这个表单填了” —— AI 自动识别表单字段、填写、提交
✅ “截个图” —— AI 秒开浏览器、访问网址、截图、发给你
✅ “点页面上那个蓝色按钮” —— AI 视觉识别 + 点击,一气呵成

一句话:让浏览器听你的话,像聊天一样简单。别废话了,开干!💪


浏览器模式

OpenClaw 提供了三种浏览器控制模式,每种对应不同的使用场景,这里只介绍Extension Relay模式。

扩展中继模式(Extension Relay)

适用场景

  • ✅ 需要访问已登录的网站(Gmail、飞书、企业后台)
  • ✅ 想复用浏览器的 Cookie 和 Session
  • ✅ 临时性、轻量级的自动化任务

工作原理
在你现有的 Chrome 浏览器上安装一个扩展程序,这个扩展会通过 WebSocket 连接到 OpenClaw 网关。当 AI 需要操作浏览器时,命令通过网关→扩展→浏览器的链路执行。

优点

  • 🎯 直接使用你的登录状态(不用重新登录)
  • 🎯 和你自己的浏览器共享配置(代理、插件等)
  • 🎯 轻量级,不需要启动额外的浏览器实例

缺点

  • ⚠️ 安全性较低(AI 理论上能访问你所有标签页)
  • ⚠️ 依赖扩展稳定性(扩展挂了就得重装)
  • ⚠️ 高级功能受限(截图、ARIA 快照需要额外配置)

配置方法

  1. 安装扩展:
openclaw browser extension install
  1. 获取扩展路径:
openclaw browser extension path 
  1. 在 Chrome 中加载:
    • 打开 chrome://extensions
    • 启用"开发者模式"
    • 选择上面命令输出的路径
  2. 配置扩展:
    • 点击扩展图标
    • 输入端口:18789,没有修改的话默认就是这个
    • 在下面输入token,下面显示绿色的一行表示成功

找到下面下图的token,cat ~/.openclaw/openclaw.json

在这里插入图片描述

点击"加载已解压的扩展程序"

在这里插入图片描述
在这里插入图片描述

使用
要先打开谷歌浏览器,开一个标签,点击下地址栏右边图标,会有个on显示在图标上(如果是个感叹号,说明没有配置对)。此时则可以使用openclaw操作谷歌浏览器了。

在这里插入图片描述

踩坑记录

1.在配置插件的时候会遇到连接不上,或者能够打开浏览器但是不能控制网页,执行openclaw gateway status有如下错误:

gateway connect failed: Error: pairing required ◇ Error: gateway closed (1008): pairing required Gateway target: ws://127.0.0.1:18789 Source: local loopback Config: /home/user/.openclaw/openclaw.json Bind: loopback 

解决方法

OpenClaw 采用了类似蓝牙的配对机制。为了防止你电脑上的恶意软件通过 127.0.0.1:18789 偷偷控制你的浏览器并窃取数据(如 Cookie 或登录状态),OpenClaw 要求每一个试图连接网关的客户端(包括 CLI 本身)都必须经过一次显式的配对授权。

openclaw gateway stop 

删除旧的身份限制文件

rm -rf ~/.openclaw/identity/ ~/.openclaw/devices/ openclaw gateway start 

重新进行配对(此时会授予默认权限):
openclaw browser --browser-profile chrome tabs


实战案例:AI 帮你干活

光说不练假把式,来看几个真实的使用场景!

案例一:自动查资料 + 总结

需求:去知乎搜索"人工智能",总结热门观点

对你的 AI助手说:

帮我去知乎搜索"人工智能",总结一下热门文章的核心观点 

AI 自动执行:

  1. 打开知乎
  2. 输入搜索词
  3. 浏览搜索结果
  4. 提取文章内容
  5. 生成总结报告

耗时:从 30-60 分钟降到 2-3 分钟

实际命令流(AI 内部执行):

openclaw browser open https://www.zhihu.com openclaw browser type e5 "人工智能"# 搜索框# e5 = 从快照中识别的搜索框元素引用 openclaw browser click e8 # 搜索按钮 openclaw browser snapshot openclaw browser text # 提取页面文本# AI 分析并生成总结

觉得有用?点个赞 + 收藏支持下!💖 关注我,获取更多 AI 实战干货!🚀

Read more

SGLang法律咨询系统:条款解释生成实战案例

SGLang法律咨询系统:条款解释生成实战案例 1. 引言:当法律条款遇上AI 你有没有遇到过这样的情况?拿到一份合同或者法律文件,里面密密麻麻的条款看得人头晕眼花。那些“兹”、“特此”、“不可抗力”之类的专业术语,每个字都认识,连在一起就不知道什么意思了。 以前遇到这种情况,要么硬着头皮自己查资料,要么花钱找律师咨询。但现在,情况不一样了。我们可以用AI技术,快速搭建一个法律条款解释系统,让复杂的法律条文变得通俗易懂。 今天我要分享的,就是用SGLang这个工具,从零开始搭建一个能自动解释法律条款的智能系统。这个系统能做什么呢?简单来说,就是你给它一段法律条文,它就能用大白话给你解释清楚,告诉你这个条款到底在说什么、有什么风险、需要注意什么。 2. 为什么选择SGLang? 2.1 SGLang是什么? SGLang,全称Structured Generation Language,翻译过来就是“结构化生成语言”。听起来有点技术范儿,但其实它的目标很简单:让大模型跑得更快、用起来更简单。 你可以把它想象成一个“模型加速器”

ruoyi-vue-pro数据大屏——纯前端单点登录

ruoyi-vue-pro数据大屏——纯前端单点登录

ruoyi-vue-pro 的已经集成了数据大屏模块go-view,并且用vue开发了前端,可以进行拖来拽就能实现一个精美的数据大屏应用,然而点击【报表管理->大屏设计】你却发现需要输入账号密码登陆,这多少有点遗憾。 ruoyi-vue-pro已经支持应用注册并进行oauth2的授权功能,然而最后一公里我们必须自己去走。 1、在【三方授权->应用管理】中注册数据大屏应用report 2、改造yudao-ui-go-view-master项目支持断点登陆 A)新增callback组件。 新增页面src/views/sso/callback.vue,内容如下: <template> <!-- 登录 --> <div> </div> </template> <script lang="ts&

异构数据迁移工具:DataX、DataX-Web

异构数据迁移工具:DataX、DataX-Web

异构数据迁移工具:DataX、DataX-Web 一、DataX + DataX-Web 简介: 1. DataX 核心特性 DataX 是阿里开源的 基础数据迁移引擎(纯命令行工具,无界面),核心功能是跨数据源同步数据。 * 架构:通过 “Reader(读数据插件)+ Writer(写数据插件)” 实现跨数据源(MySQL、Oracle、HDFS 等)数据搬运; * 局限性:本身不自带分表规则逻辑,需配合脚本预处理或自定义插件实现按分表规则拆分数据; * 优势:轻量、开源免费、跨数据源兼容性强,适合中小规模数据迁移。 2. DataX-Web 核心作用 DataX 是阿里开源的 基础数据迁移引擎(纯命令行工具,无界面),核心功能是跨数据源同步数据。 * 核心功能:可视化配置迁移任务、定时调度(如每日增量同步)、迁移进度监控、

WebStorm + AI:智能代码补全与重构新体验

快速体验 1. 打开 InsCode(快马)平台 https://www.inscode.net 2. 点击'项目生成'按钮,等待项目生成完整后预览效果 输入框内输入如下内容: 创建一个WebStorm插件,集成AI代码补全和重构功能。插件应支持JavaScript、TypeScript和HTML/CSS的智能提示,能够根据上下文自动生成代码片段,并提供一键重构建议。插件需与WebStorm的现有功能无缝集成,支持实时错误检测和优化建议。 作为一名前端开发者,我最近尝试在WebStorm中集成AI辅助开发功能,发现这能极大提升编码效率。今天分享下我的实践过程,希望能给同样追求高效开发的你一些启发。 1. AI辅助开发的必要性 在日常开发中,我们经常面临重复代码编写、复杂逻辑实现和代码优化等问题。传统IDE虽然提供基础补全功能,但往往缺乏上下文理解能力。而AI技术恰好能弥补这一缺陷,通过分析代码上下文给出更精准的建议。 2. 插件功能设计 我设计的插件主要包含三大核心功能: 3. 智能代码补全:支持JavaScript/TypeScript和HTML/CSS,能