Midscene Chrome扩展安装教程：自然语言控制浏览器，4步跑通第一个AI自动化任务
【免费下载链接】midsceneGUI Agent for E2E Testing项目地址: https://gitcode.com/GitHub_Trending/mid/midscene
Midscene Chrome扩展是一款面向新手的AI浏览器自动化工具：安装扩展后，用中文输入指令，浏览器就会替你点击、输入、提取数据并检查页面状态，无需编写脚本，4个步骤就能完成第一次体验。
一句话认识它：不用写脚本的浏览器操作员
Midscene 是一个开源的 AI GUI 自动化框架，Chrome 扩展是它面向网页端的 Playground（实验场）。官方文档的定位是：无需搭建项目，直接在网页中体验交互、数据提取和界面检查。
- 它解决什么：你想自动点击/输入、从页面里提取数据、验证页面状态，但不想手写 JavaScript 定位元素。
- 它不解决什么：它不替代完整的测试框架，跨页面的批量任务需要配合 YAML 脚本或 Agent API 使用。
- 前提：需要准备一个具备 UI 定位能力的多模态模型（千问、豆包、Gemini 等均可）。
从安装到跑通：Midscene Chrome扩展最快启用4步
- 准备模型配置：按官方示例设置模型地址、API Key、模型名等配置项，具体支持的模型见模型配置文档。
- 安装扩展：打开 Chrome 应用商店，搜索 "Midscene"，点击"添加到 Chrome"。此时你应该看到扩展图标出现在浏览器右上角。
- 打开侧边栏：在 Chrome 的扩展列表中打开Midscene。此时浏览器右侧会出现 Midscene 侧边栏，这是后续所有操作的入口。
- 粘贴配置并执行第一条指令：点击侧边栏的设置图标，将模型配置完整粘贴进去并保存。打开任意网页，在侧边栏输入"点击登录按钮"并执行。此时你应该看到浏览器自动完成这次点击，任务报告里能看到截图和过程。
在 Midscene Chrome扩展侧边栏输入指令，即可在当前网页上执行AI自动化操作
三个最实用的用法：操作、取数、校验
场景一：替你完成重复的页面操作。用"规划并交互"能力（对应aiAct），输入如"在搜索框输入'无线耳机'，点击搜索按钮"，扩展会自动理解页面、找到元素并完成点击输入。你省掉的是写选择器、等待元素出现、处理动态加载这一整套代码。
场景二：把页面内容变成表格能用的数据。用"提取结构化数据"能力（对应aiQuery），输入"页面中的商品，{name: string, price: number}[]"，它会返回结构化的名称和价格数组，直接可用于比价或监控，不用手动复制粘贴。
场景三：一眼确认页面状态对不对。用"检查界面"能力（对应aiAssert），输入"页面顶部显示导航栏"，执行后当场告诉你通过还是失败。回归检查一个页面时，这比人工逐项核对快得多。
扩展即 Web 端 Playground，可在独立实验场中调试自然语言指令
进阶特性深入：桥接模式让你复用已登录的浏览器
这是 Chrome 扩展最有差异化的能力，叫Bridge Mode（桥接模式）。普通扩展只控制当前页面，而桥接模式让你用本地终端的脚本去控制桌面版 Chrome，可以连接新标签页，也可以附着到你当前正在看的标签页。
它的关键价值在于：脚本能复用你本地浏览器的 cookies、插件和登录状态。也就是说，需要登录态才能操作的网站，不用重新走一遍注册登录，脚本接手的时刻就是"人登录完、机器接着干"的时刻，这在自动化领域被称为 man-in-the-loop（人在环中）。
使用时，先在终端安装@midscene/web，然后写一个很短的脚本：
const agent = new AgentOverChromeBridge(); await agent.connectNewTabWithUrl("https://www.bing.com"); await agent.ai('type "AI 101" and hit Enter');运行后，Chrome 扩展会弹出确认窗口，点击 "Allow" 允许本次连接，或点 "Always Allow" 以后自动放行。确认后你会看到 Chrome 打开新标签页并开始执行脚本指令。扩展图标上的状态徽标也会提示你：黄点表示正在监听，绿点表示已连接。
如果你习惯用 YAML 写流程，也可以直接在脚本的web配置里加上bridgeMode: newTabWithUrl或currentTab，就能让 YAML 任务走桥接模式执行，细节见桥接模式文档。
在 Bridge Mode 面板中配置服务器地址，实现跨机器的 Midscene Chrome扩展远程控制
实战走查：一个网页的取数加校验全流程
背景：你在监控一个电商商品页，需要定期拿到商品名称和价格，同时确认页面结构没有改版。
步骤：
- 打开商品列表页，点击浏览器扩展图标打开 Midscene 侧边栏。
- 在指令框输入取数指令："页面中的商品，{name: string, price: number}[]"，执行。
- 输入校验指令："页面顶部显示导航栏"，执行并查看断言结果。
- 确认指令效果稳定后，把这两条指令按对应 API 固化到脚本里，后续批量跑。
结果：你会得到一份结构化的商品名称与价格数据和一条"通过"的断言记录，整个任务不需要你写过一行定位代码。
常见问题速答
症状：执行时提示Cannot access a chrome-extension:// URL of different extension。→ 解决办法：这通常是其他扩展与 Midscene 冲突（向页面注入了 iframe 或脚本）。打开开发者工具，找到以chrome-extension://开头的元素并复制扩展 ID，再到chrome://extensions/按 ID 禁用该扩展，刷新页面重试。
症状：用 Ollama 本地模型时出现 403 错误。→ 解决办法：设置环境变量OLLAMA_ORIGINS="*"，允许 Chrome 扩展访问本地 Ollama 模型。
症状：桥接模式脚本需要上传本地文件却失败。→ 解决办法：打开chrome://extensions，找到 Midscene 进入 Details，开启 "Allow access to file URLs"，再切回目标页面重新连接。
症状：桥接模式下模型配置不生效。→ 解决办法：桥接模式的模型参数要配在**终端（Node.js 环境）**里，而不是浏览器侧，配错位置脚本读不到 Key。
快速上手收尾
Midscene Chrome扩展的核心价值一句话：用自然语言指挥浏览器操作、取数和校验，把写脚本的时间省下来。完整步骤可查阅快速开始文档，扩展源码在 apps/chrome-extension/ 目录。建议你现在就打开一个熟悉的页面，输入"点击登录按钮"跑一遍——3 分钟内你就能确认整套流程跑通了。
【免费下载链接】midsceneGUI Agent for E2E Testing项目地址: https://gitcode.com/GitHub_Trending/mid/midscene
创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
