如何用 Midscene Chrome 扩展实现零代码浏览器自动化新手完整指南【免费下载链接】midsceneGUI Agent for E2E Testing项目地址: https://gitcode.com/GitHub_Trending/mid/midscene假设你需要每天确认搜索结果页的某个入口是否还在或者把页面上的商品名称和价格抓下来核对一遍。手动做当然可以但重复劳动很快就会变成负担。Midscene 是一个 AI 驱动的 GUI 自动化项目它的 Chrome 扩展让你用一句自然语言就能驱动浏览器完成点击、输入、校验和数据提取全程不需要编写自动化代码。这篇文章跟着一个真实的小任务走打开搜索页、搜索一个商品、确认结果出现、把价格取回来。完成这件事之后我们再顺路看两个进阶用法——从终端控制你日常在用的浏览器以及把流程沉淀成可重复运行的脚本。第一次使用扩展面板与三种指令安装分两种路径直接在 Chrome 商店搜索 Midscene 安装或者从源码构建后手动加载。如果你走第二条路git clone https://gitcode.com/GitHub_Trending/mid/midscene cd midscene/apps/chrome-extension pnpm install pnpm run build构建完成后打开chrome://extensions/开启右上角的开发者模式点击加载已解压的扩展程序选择构建产物目录即可。接下来在扩展的设置页粘贴你的模型配置——Midscene 依赖一个具备 UI 定位能力的多模态模型API 密钥、模型名称等参数都填在这里。面板里对应三种指令分别回答三个不同的问题Action对应 aiAct回答帮我做一件事。输入在搜索框输入 Midscene 并回车它会自己观察页面、规划步骤、找到输入框并执行。多步操作、带分支逻辑的任务都交给它。Query对应 aiQuery回答页面上有什么数据。输入类似页面中的商品{name: string, price: number}[]它会返回结构化的 JSON而不是让你去翻页面源码。Assert对应 aiAssert回答某个条件成立吗。输入页面顶部显示了搜索结果列表条件不成立时会直接报错方便你在流程里做检查点。这里值得解释一下 Midscene 定位元素的思路它不像传统自动化那样靠 CSS 选择器去点名某个节点而是对页面截图让模型像人看屏幕一样回答搜索框在哪里。好处是页面前端重构、类名换了都影响不大代价是纯视觉定位当页面出现大量外观相似的元素时需要更精确的描述或者开启深度定位选项。 从终端控制浏览器Bridge 模式怎么用扩展面板适合手工试用但如果你想让脚本和浏览器配合干活Bridge 模式更有用。白话来说扩展相当于在浏览器里装了一个遥控接收器你终端里的 Node.js 脚本就是遥控器。脚本发起连接时扩展会弹一个确认框你点一次 Allow脚本就能接管一个新标签页或者附着到你当前激活的标签页上。它最大的价值是复用了你真实浏览器的登录态和 Cookie。很多自动化场景卡在需要登录这一步而 Bridge 模式直接操作你本人日常使用的那个 Chrome登录问题天然不存在。使用步骤可以概括为四步在终端项目里安装midscene/web依赖写好脚本创建AgentOverChromeBridge实例并调用connectNewTabWithUrl打开目标网址然后调用与普通 Agent 完全相同的aiAct、aiAssert等方法任务结束后调用destroy释放。有一个细节要注意Bridge 模式下模型配置写在终端侧的环境变量里而不是浏览器扩展的设置页。另外扩展图标上的状态点也值得留意黄点表示正在监听连接请求绿点表示已有脚本连接。更省事的做法是不写代码YAML 脚本里给 web 配置加上bridgeMode: currentTab或newTabWithUrl整份流程就能走 Bridge 通道详见桥接模式文档。 把流程写进 YAML从一次性操作到可复用脚本前两部分都在浏览器里手工触发指令。要把搜索商品、等待、校验结果这类流程变成每天能跑的东西Midscene 的方案是一个.yaml文件page.url指定目标网址tasks下面按顺序列出步骤每一步可以是ai执行自然语言动作、sleep等待若干毫秒或aiAssert断言检查。写好之后通过命令行运行器执行midscene 你的脚本.yaml即可无需维护一整套测试框架。仓库里有一批现成脚本可以直接抄作业从单个任务到多任务串行都有packages/cli/tests/midscene_scripts/。如果你要跑的是更复杂的回归场景文档里还有并行的 Test Runner 方案适合后期升级。 跑完之后执行报告帮你定位问题自动化的麻烦往往不在跑通而在跑挂了不知道挂在哪。Midscene 每次运行都会产出一份 HTML 报告顶部是时间轴每个步骤对应一张截图左侧列出每一步的 Planning规划、Insight / Locate理解和定位、Action执行子步骤及各自耗时哪一步断言失败会直接标出来。排查时对着时间轴往前找两三步通常就能看清是页面没加载完、元素没找到还是断言条件写错了。下一步从文档和示例继续给你三条实在的建议从最简单的 Assert 指令开始先确认当前页面看得对不对再叠加 Action 和 Query指令写得像口头交代任务带上位置和外观特征右上角的购物车图标比购物车更稳遇到Cannot access a chrome-extension:// URL of different extension报错基本是其他扩展向页面注入了脚本按快速开始文档里的 FAQ 用开发者工具找出冲突的扩展禁用掉。想继续深入的话快速开始文档覆盖了模型配置到各平台 Playground 的完整路径核心源码 packages/core/src/ 则是理解 Agent 规划与定位机制的入口。先把搜索—校验—取数这条链路在自己电脑上跑通后面的 Bridge 模式和 YAML 脚本都是顺着这条线自然长出来的。【免费下载链接】midsceneGUI Agent for E2E Testing项目地址: https://gitcode.com/GitHub_Trending/mid/midscene创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考