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

【2025最新】基于SpringBoot+Vue的web网上摄影工作室开发与实现pf管理系统源码+MyBatis+MySQL

【2025最新】基于SpringBoot+Vue的web网上摄影工作室开发与实现pf管理系统源码+MyBatis+MySQL

摘要 随着互联网技术的快速发展和数字化生活的普及,摄影行业逐渐从传统的线下模式转向线上平台。网上摄影工作室作为一种新兴的服务模式,为用户提供了更加便捷的摄影服务选择,同时也为摄影师和摄影爱好者提供了展示和交易的平台。然而,目前市场上的摄影服务平台功能单一,用户体验不佳,缺乏个性化的服务和管理功能。因此,开发一个功能完善、操作便捷的网上摄影工作室管理系统具有重要的现实意义。该系统旨在整合摄影资源,优化服务流程,提升用户体验,同时为摄影师和用户搭建高效的沟通桥梁。关键词:网上摄影工作室、SpringBoot、Vue、管理系统、数字化服务。 本系统采用前后端分离的架构设计,前端使用Vue.js框架实现动态交互和响应式布局,后端基于SpringBoot框架搭建高效稳定的服务层,数据库采用MySQL进行数据存储,并通过MyBatis实现数据持久化操作。系统主要功能包括用户管理、摄影作品展示、在线预约、订单管理、评论互动等模块。用户可以通过系统浏览摄影师的作品集,在线预约拍摄服务,管理个人订单;摄影师则可以上传作品、管理预约订单、与用户互动。系统还支持多角色权限管理,确保数据安全和操作合规性。

Qwen3-VL-WEBUI保姆级教程:从零开始搭建多模态推理环境

Qwen3-VL-WEBUI保姆级教程:从零开始搭建多模态推理环境 1. 引言 1.1 学习目标 本文将带你从零开始完整部署并运行 Qwen3-VL-WEBUI,实现基于阿里开源的多模态大模型 Qwen3-VL-4B-Instruct 的视觉-语言推理能力。无论你是 AI 初学者还是有一定工程经验的开发者,都能通过本教程快速搭建本地或云端的多模态推理环境,支持图像理解、视频分析、GUI 操作代理、OCR 解析等多种高级功能。 学完本教程后,你将能够: - 成功部署 Qwen3-VL-WEBUI 环境 - 理解其核心架构与技术优势 - 使用 Web UI 进行多模态交互推理 - 掌握常见问题排查与性能优化技巧 1.2 前置知识 建议具备以下基础: - 基础 Linux 命令操作能力 - Docker 或容器化部署的基本了解(非必须) -

LTspice Web中SPICE模型调用的完整指南(在线仿真应用)

在线电路仿真实战:手把手教你搞定 LTspice Web 中的 SPICE 模型调用 你有没有遇到过这样的场景?正在远程开会,突然想验证一个电源拓扑,但手边只有笔记本电脑、没有安装 LTspice;或者在教学演示时,学生因为系统兼容问题无法复现你的仿真结果。这时候, LTspice Web 就成了救场神器——无需安装、打开浏览器就能跑电路仿真。 但真正用起来才发现:桌面版里轻轻一点就能加载的 .lib 模型,在网页端却频频报错“Unknown subcircuit”。这背后不是软件 bug,而是 在线环境与本地系统的根本差异 。 今天我们就来彻底讲清楚:如何在 LTspice Web 中正确调用第三方或自定义 SPICE 模型。从原理到实操,从常见坑点到高级技巧,一篇文章帮你打通全流程。 为什么模型会“找不到”?先搞懂 SPICE 的查找逻辑 在动手之前,必须明白一件事:LTspice

IIS 部署 .NET 6 WebApi 实战指南(附优缺点分析)

IIS 部署 .NET 6 WebApi 实战指南(附优缺点分析)

在 .NET 开发体系里,IIS 一直是部署 WebApi 的主力工具。 很多人接口写得很熟练,但真正涉及部署时,却容易卡在环境、权限、证书这些细节上。 今天我们从 0 到 1,把 .NET 6 WebApi 部署到 IIS 上跑起来,同时聊聊它适合做什么、不适合做什么。 一、环境准备 部署前,先确认三件事: 1️⃣ 已安装 IIS 控制面板 → 启用或关闭 Windows 功能 → 勾选: * Internet Information Services * Web 管理工具 * 万维网服务 * 应用程序开发功能 安装完成后访问: http://localhost 能看到默认页面说明成功。 2️⃣ 安装