用一句话让 Chrome 自己干活Midscene 扩展从安装到跑通的全流程【免费下载链接】midsceneGUI Agent for E2E Testing项目地址: https://gitcode.com/GitHub_Trending/mid/midsceneMidscene 是一个用自然语言操控界面的 GUI Agent它的 Chrome 扩展让你不写一行选择器代码就能让浏览器替你点、输、取数、验证。以前自动化一个登录流程你得查 DOM、写 XPath、加等待逻辑动辄几十行脚本还怕页面一改就崩现在在侧边栏打一句点击登录按钮就行浏览器自己看图定位、自己执行。四种能直接上手的界面能力Midscene 的能力可以按你拿它干什么分成四类全部用中文口语描述即可触发。让浏览器替你操作交互类指令你只需要说出目标它自己拆解步骤、定位元素、连续执行。适合多步骤、带条件分支的长流程。搜索耳机把第一件商品加入购物车——它会自动找搜索框、输入、点结果如果出现 Cookie 授权弹窗先关掉再点登录——弹窗处理可以直接写进一句话里滚动到页面底部点展开更多——滚动和点击混排成一句自然语言从页面里掏出结构化数据aiQuery它不是截图后让你肉眼看而是按你声明的结构直接返回数据。页面中的商品{name: string, price: number}[]——返回的就是数组可直接进 Excel 或数据库顶部导航栏的菜单项——适合批量采集导航结构提取失败时会说明原因你可以调整字段描述再试验证页面状态断言适合做回归检查和自动化收尾条件不成立会直接报错并给出模型判断的原因。购物车里有一件商品并且显示了小计金额登录成功后右上角显示用户头像处理拿不准的指令即时交互 API当你只需要点这一个位置往这个框里打字而不是让 AI 自由规划可以用aiTap、aiInput这类单次操作更快也更省 token。指令从流程描述变成单点动作出错面更小。从启动到跑通一条完整工作流把扩展、模型配置、Bridge 模式串起来实际使用顺序是这样的先装扩展 → 再配模型 → 最后接本地脚本。先装扩展。从 Chrome 商店安装 Midscene浏览器右侧会出现侧边栏如果你要本地开发调试也可以在chrome://extensions/开启开发者模式加载 扩展源码 构建出的目录。这一步值得做的原因扩展即 Playground所有能力都可以先在真实网页上白手验证不用先搭项目。再配模型。进入侧边栏设置页粘贴一组包含 Base URL、API Key、模型名称的环境变量配置并保存。官方文档里有豆包、千问、GLM 等多个多模态模型的现成配置模板见 模型配置文档。这一步是整个流程里唯一费脑子的环节配好一次后面所有页面通用。最后接本地脚本可选。当你想让终端里的代码直接接管自己日常在用的 Chrome就启用 Bridge 模式在 Node.js 侧安装midscene/web用桥接 Agent 连上浏览器脚本运行时扩展会弹出确认窗口点 Allow 即可接管。import { AgentOverChromeBridge } from midscene/web/bridge-mode; const agent new AgentOverChromeBridge(); await agent.connectNewTabWithUrl(https://www.bing.com); await agent.ai(type AI 101 and hit Enter);这一步值得做的动机Bridge 复用你本地浏览器真实的 Cookie、插件和登录态属于典型的 man-in-the-loop 玩法——脚本负责批量部分人随时可以在同一个浏览器里接手。它还能复用现成的登录会话跳过每次自动化都要重新认证的麻烦。详细用法见 桥接模式文档。场景实战从取数到盯盘场景一竞品价格采集背景你需要每周把某电商类目前 20 个商品的价格同步进表格。你输入什么提取页面上所有商品的名称和价格{name: string, price: number}[]。浏览器做了什么Midscene 截图识别当前列表页定位每个商品卡片按结构逐个抽取返回一个 JSON 数组。你得到什么一段可直接粘贴进表格的数据整个类目一次取完不用复制粘贴。如果返回结构错乱比如把促销标签当成了价格你会在结果里看到异常字段。此时把指令改得更具体——只取标注价格的数字字段忽略促销标签——重新执行即可无需碰任何代码。场景二登录态页面定时巡检背景你要确认内部系统每天凌晨的报表页正常生成而且登录不能每次都走一遍。你输入什么写在本地脚本里Bridge 模式附着到你已登录的当前标签页依次执行打开报表页断言报表日期是今天若日期不是今天则截图留存。浏览器做了什么脚本复用你的登录态进入受保护页面逐项断言失败时把原因写进输出。你得到什么一条通过/失败 原因的结论而不是一个需要你肉眼核对的网页。跨机器场景下扩展的 Bridge Mode 页面可以填远程 Server 地址来连接另一台机器上的浏览器官方文档里也明确提醒只在可信内网开启。避坑速查坑为什么怎么绕跑不起来报chrome-extension:// URL of different extension其他扩展向页面注入了 iframe 或脚本和 Midscene 抢注入通道在 DevTools 里找到冲突扩展的 ID到chrome://extensions/禁用它再刷新指令写成获取数据这类模糊话模型不知道要提取哪个区域、什么结构指明区域 字段结构比如提取表格中所有产品的名称、价格、库存页面没加载完就下指令截图截到了 loading 态定位自然是错的指令里带上等待语义等页面加载完成后再点击登录复杂流程直接上生产长流程中任何一步偏移都会被后续步骤放大先在扩展侧边栏里试跑通过再搬进脚本或 YAML本地模型 403 报错扩展跨源访问本地模型服务被拦截按 快速开始文档 的 FAQ 配置对应环境变量原理一瞥为什么它敢只看截图传统自动化依赖 DOM 和元素选择器页面重构、无语义标记的按钮、canvas 绘制的区域都会让它失灵。Midscene 反其道而行把当前界面的截图交给多模态视觉模型由模型看到元素的位置和状态再换算成点击、输入的坐标。规划、定位、断言都建立在图像之上DOM 只是需要读文本时才可选补充的线索。打个比方它不像拿着钥匙串逐个试锁孔的师傅而是像看着门牌号和门的样子直接推门进去的人——门牌换样式了只要还看得见照样进得去。今晚就能跑起来的清单克隆仓库git clone https://gitcode.com/GitHub_Trending/mid/midscene在 Chrome 商店安装 Midscene 扩展打开侧边栏从 模型配置文档 复制一组模型配置粘贴进设置页保存打开任意网页输入点击登录按钮试跑第一条指令用 aiQuery 结构提取一次当前页面的数据体会看图取数本地装midscene/web写一个 Bridge 脚本接管你的 Chrome 标签页下一步你可以把试通过的指令固化成 YAML 自动化脚本放进 CI也可以接上 Playwright 做更正式的 E2E 测试套件——扩展里验证过的每一句话在代码里都是现成的 API 调用。【免费下载链接】midsceneGUI Agent for E2E Testing项目地址: https://gitcode.com/GitHub_Trending/mid/midscene创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
