Midscene Chrome 扩展:自然语言操控浏览器,5 分钟跑通首次运行 Midscene Chrome 扩展自然语言操控浏览器5 分钟跑通首次运行【免费下载链接】midsceneGUI Agent for E2E Testing项目地址: https://gitcode.com/GitHub_Trending/mid/midsceneMidscene Chrome 扩展是用于自然语言浏览器自动化的视觉 GUI Agent装好扩展、输入一句指令它就能操作网页、提取数据并校验状态适合开发者、测试人员和有重复浏览器操作需求的普通用户。 一张表看懂它扩展侧边栏提供 3 种指令类型和 2 个模式面板全部零代码即可试用模块一句话说明典型用途ActionaiAct模型观察页面、自主规划并执行多步操作搜索蓝牙耳机按价格排序QueryaiQuery从当前页面提取结构化数据以 JSON 返回页面中的商品{name: string, price: number}[]AssertaiAssert校验页面状态是否符合描述不符合时抛出错误页面顶部显示导航栏Bridge 模式本地脚本连接桌面 Chrome复用 Cookie 与登录态脚本与人工操作结合、保持登录状态模型配置侧边栏设置中接入具备 UI 定位能力的多模态模型切换 GPT、Qwen、GLM 等模型服务⏱️ Midscene 扩展的 5 分钟安装法在 Chrome Web Store 搜索 Midscene 并安装成功标志Chrome 扩展列表中出现 Midscene 图标打开任意网页点击工具栏中的 Midscene 图标成功标志浏览器右侧出现 Midscene 侧边栏顶部有模型配置区在设置中填入模型服务地址Base URL、API Key、模型名三项并保存成功标志保存后侧边栏的 In-Browser Request Config 区域显示已配置的模型名选中 Action 选项卡输入type Midscene.js and click search点击 Run成功标志页面搜索框被自动填入并执行搜索侧边栏底部出现元素定位动画两点说明模型必须是具备 UI 定位能力的多模态模型各厂商配置项见模型配置文档若想自己构建可克隆仓库构建后在chrome://extensions/开启开发者模式把构建产物apps/chrome-extension/dist目录作为已解压的扩展程序加载。 核心功能拆解ActionaiAct多步操作的主力Action 接收自然语言目标观察当前页面后自行规划步骤并逐一执行。适用于执行路径不确定的多步任务例如流程中可能出现弹窗或分支。最小示例搜索蓝牙耳机按价格排序把第一件商品加入购物车。QueryaiQuery从页面提取结构化数据Query 只观察页面、不操作页面在指令中描述数据结构即按结构返回 JSON。适用于商品、列表等目标元素稳定的数据提取需求。最小示例页面中的商品{name: string, price: number}[]。AssertaiAssert校验页面状态是否符合预期Assert 验证页面状态与自然语言描述是否一致不一致时抛出错误并附上模型给出的原因。它对应 E2E 测试中的验证环节也是手动排查页面问题时的快速检查手段。最小示例购物车中有一件商品并且页面显示了小计金额。Bridge 模式怎么配本地脚本连接桌面 ChromeBridge 模式让本地脚本直接控制正在使用的 Chrome复用它已有的 Cookie、插件和页面状态自动化领域称之为 man-in-the-loop。适用于脚本流程中插一步人工操作或长时间自动化但要保持登录态的场景。用法分两侧扩展端打开 Bridge Mode 面板开始监听扩展图标黄点表示监听中、绿点表示已连接脚本端安装midscene/web后创建 Agentconst agent new AgentOverChromeBridge(); await agent.connectCurrentTab(); await agent.aiAction(type Midscene.js, click search button);脚本运行时扩展会弹出确认窗口点 Allow 授权即可。注意 Bridge 模式下模型配置写在终端环境变量里而不是浏览器设置中。 一个真实工作流商品列表页价格提取输入指令打开任一电商站点的商品列表页在侧边栏切到 Query 选项卡输入页面中的商品{name: string, price: number}[]点击 Run中间步骤Midscene 对当前页面截图模型逐个识别商品名称与价格的位置和内容按指定结构返回产出结果得到一份商品数据 JSON 数组可直接落盘或写入表格[{ name: 无线耳机, price: 99.9 }, { name: 蓝牙耳机, price: 199 }]收尾校验追加一条 Assert 指令页面显示了至少 10 件商品不通过会直接报错说明原因指令验证稳定后可在midscene/web中用aiQuery以同样提示词复用从手动试玩变成定时跑批任务❓ 上手 FAQ运行指令时报 Cannot access a chrome-extension:// URL of different extension 怎么办通常是其他扩展向页面注入了 iframe 或 script 造成冲突。在开发者工具中找到chrome-extension://开头的 URL到chrome://extensions/按扩展 ID 定位并禁用对应扩展刷新页面重试。用本地 Ollama 模型时出现 403 错误设置环境变量OLLAMA_ORIGINS*允许扩展访问本地模型然后重启 Ollama 再试。模型偶尔定位错元素怎么提高指令的可靠性把指令写具体到位置 特征 动作例如点击搜索框右侧蓝色的搜索按钮而不是点击按钮加载慢的页面在指令开头加等待页面加载完成。 资源与收尾快速开始文档扩展安装、模型配置与首次体验Bridge 模式文档连接确认、YAML 脚本与远程访问配置扩展源码侧边栏、Bridge 面板等前端实现核心引擎源码Agent 规划与执行逻辑建议先打开一个熟悉的页面把 Action、Query、Assert 三种指令各跑一遍指令验证稳定后再通过 Bridge 模式接入本地脚本把它变成可定时运行的自动化流程。【免费下载链接】midsceneGUI Agent for E2E Testing项目地址: https://gitcode.com/GitHub_Trending/mid/midscene创作声明:本文部分内容由AI辅助生成(AIGC),仅供参考