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

前端大数据渲染性能优化:Web Worker + 分片处理 + 渐进式渲染

当你的页面需要解析和渲染大量数据时,用户可能会面对长时间的白屏等待。本文将介绍一种"Web Worker 分片处理 + 主线程渐进式渲染"的优化方案,让用户在数据加载过程中就能看到内容逐步呈现。 目录 1. 问题场景 2. 为什么传统方案不够好 3. 解决方案概述 4. 技术原理详解 5. 完整代码实现 6. 性能对比 7. 适用场景 8. 总结 问题场景 最近在做一个历史聊天记录恢复的功能,后端返回大量数据需要前端进行解析拼接在渲染到页面上,如果数据量大,聊天记录可能得十几秒才会显示,用户体验极差。我们需要解决的问题有两个,数据解析和DOM渲染 为什么传统方案不够好 方案一:直接同步处理 // ❌ 问题:阻塞主线程,页面完全卡死const transactions = rawData.map(item =>parseTransaction(item))setTransactions(

Selenium环境搭建完全指南:WebDriver版本匹配与生产级配置实践(Day 21-23)

引言:Web自动化的第一块多米诺骨牌 如果你曾尝试在深夜配置Selenium环境,大概率经历过这样的场景:满怀信心地写下webdriver.Chrome(),回车执行,浏览器窗口一闪而逝——秒退。紧接着是SSL握手失败的红色堆栈,GitHub Issue的彻夜鏖战,以及第二天早晨同事轻描淡写的一句“哦,你Chrome版本没对齐吧”。 环境搭建是Web自动化门槛最低、踩坑密度最高的环节。它不需要复杂的业务逻辑,却对细节有近乎偏执的要求:浏览器版本、驱动版本、系统架构、环境变量、二进制路径——任何一环脱节,整个自动化大厦便无从谈起。 Day 21-23的目标不是让你“跑通一个脚本”,而是建立对Selenium WebDriver底层交互机制的工程级认知。本文将从版本匹配的底层逻辑切入,覆盖跨平台配置、常见陷阱根治方案,并引入2026年主流的最佳实践工具链。读完本文,你将具备诊断并彻底解决环境问题的能力,而不再依赖“重装大法”。 一、Selenium WebDriver的本质:不只是“驱动” 1.1 拆解黑箱:WebDriver协议与浏览器内核 许多初学者将WebDriver误

Xinference-v1.17.1快速部署:GitHub Codespaces云端环境3分钟启动WebUI

Xinference-v1.17.1快速部署:GitHub Codespaces云端环境3分钟启动WebUI 1. 为什么这次更新值得你立刻试试? Xinference-v1.17.1不是一次普通的小版本迭代。它把“开箱即用”这件事做到了新高度——你不需要本地装Python、不用配CUDA、甚至不用下载模型文件,只要一个浏览器,三分钟内就能看到完整的WebUI界面跑起来,还能直接和Qwen2、Phi-3、Gemma2这些热门模型对话。 更关键的是,它彻底打破了“换模型=重装环境”的老套路。以前想试试Llama3还是DeepSeek-V2,得反复改配置、删缓存、调参数;现在只需要改一行代码,GPT的调用逻辑就自动切换成任意开源LLM。这不是概念演示,是实打实能在云上跑、在笔记本跑、在边缘设备跑的生产级推理平台。 如果你试过用Ollama拉模型卡在99%、被vLLM的编译折磨到放弃、或者被FastChat的端口冲突搞崩溃……那这次,真的可以松一口气了。 2. 什么是Xinference?一句话说清它能帮你省多少事 Xinference(全称Xorbits Inference

vue-router(vue 路由)基本使用指南(二)

vue-router(vue 路由)基本使用指南(二)

文章目录 * 深入使用 * 导航守卫 * 重定向与别名 * history 配置:指定历史模式 * 路由元信息(meta) * 拓展 * 状态管理(Pinia / Vuex) * Pinia / Vuex 介绍 * Vuex vs Pinia * Pinia 基本使用 * Pinia 使用 Cookies 存储 深入使用 导航守卫 导航守卫用于在路由跳转前、跳转后或解析过程中,添加自定义的逻辑处理,例如权限验证。 * to 和 from 是即将进入的目标路由和当前导航正要离开的路由 * next 是一个函数,该函数用于控制路由的跳转。 * next():继续执行路由。 * next(false):中断当前路由,如果浏览器的 URL 改变了,那么 URL 会回到 from