Midscene Chrome 扩展三步把浏览器重复操作交给 AI【免费下载链接】midsceneGUI Agent for E2E Testing项目地址: https://gitcode.com/GitHub_Trending/mid/midsceneMidscene Chrome 扩展是一个把 GUI Agent 装进浏览器侧边栏的自动化工具你用一句自然语言描述想做的事它就看着屏幕替你点击、输入和核对结果。如果你每天要重复做同一类网页操作——搜索商品、复制价格、填表单、核对页面上是否出现某个提示——这个扩展就是为这类活设计的。 它到底是什么概念速览可以把 Midscene 扩展理解成住在你浏览器侧边栏里的操作员它不读代码只读屏幕。对比维度传统脚本做法Midscene 扩展元素定位手写 CSS/XPath 选择器看截图按外观和位置找元素描述任务编写 TS/JS 代码输入一句自然语言验证结果检查 DOM 属性像人一样看画面是否出现预期内容运行环境启动新的无头浏览器复用你已登录的 ChromeBridge 模式⏱️ 十分钟上手路径整个过程按准备 → 安装 → 跑通 → 看结果四步走十分钟内可以完成第一次浏览器自动化。准备准备一个有 UI 定位能力的多模态模型如 Gemini、Qwen 系列、UI-TARS 等拿到模型服务地址和 API Key。Midscene 通过截图驱动不用把整棵 DOM 发给模型。安装从 Chrome 应用商店安装 Midscene 扩展如果访问受限也可以克隆仓库后本地构建git clone https://gitcode.com/GitHub_Trending/mid/midscene然后在扩展目录执行pnpm install和构建到chrome://extensions/以加载已解压的扩展程序方式安装产物。跑通第一个任务打开扩展侧边栏点设置图标把模型配置粘贴进去保存。打开任意网页在侧边栏输入一条符合当前页面的指令例如点击登录按钮点 Run。看到结果执行完成后右侧会展示每一步的截图、定位到的元素和结果。Midscene 还会生成可视化 HTML 报告记录动作、断言结果和 AI 的决策过程方便你回看它到底做了什么。 能力拆解四类能力覆盖了操作、取数、核对、接管四条主线先判断你的需求属于哪类再选对应入口。用自然语言操作页面aiAct它帮你在不写选择器的情况下完成多步操作包括点图标按钮、操作canvas和跨域 iframe 里的元素。什么时候用得上页面结构经常变、元素没有稳定 selector或者你要跑的是搜索 → 筛选 → 确认这类多步骤流程时。从网页提取结构化数据aiQuery它帮你按 schema 把页面上的内容取成 JSON比如商品列表的name和price。什么时候用得上采集报表数据、批量核对字段、把网页内容变成可入库的结构化数据时。用眼睛核对结果aiAssert它帮你以视觉方式验证界面状态判断颜色、高亮、布局、错误提示是否符合预期。什么时候用得上E2E 测试里做断言或流程末尾确认错误信息出现在邮箱输入框下方这类视觉结果时。Bridge 模式让本地脚本接管你的 Chrome它帮你把本地终端里的脚本接到桌面 Chrome 上复用浏览器已有的 cookies、插件和登录状态。什么时候用得上任务需要已登录账号或你想脚本干一半、人工补一刀man-in-the-loop时。 三个可直接抄的实战配方以下配方都可以先用扩展侧边栏验证指令再落到 YAML 脚本里跑。配方一每天监控 5 个商品的价格目标定时抓取 5 个商品页的价格和名称。触发方式写一份 YAML 脚本aiQuery提取{name, price}[]用系统定时任务在每天固定时间执行midscene ./prices.yaml。预期产出一份 JSON 结果和 HTML 报告可追加进你的表格或数据库。配方二登录流程回归自检目标验证登录后右上角出现用户名这条关键路径。触发方式YAML 脚本里ai步骤完成登录aiAssert: 右上角显示用户头像代码改动后手动或接入 CI 运行。预期产出通过/失败结论外加带截图和 AI 决策过程的可视化报告。配方三半自动处理已登录站点目标在你已登录的账号里执行一段重复操作脚本和人工可以交替接管。触发方式本地脚本通过AgentOverChromeBridge附着到当前标签页在扩展弹窗中点 Allow。预期产出操作直接发生在你自己的 Chrome 里报告照常生成中途需要人工介入时随时可以暂停脚本。⚠️ 边界与避坑先说清楚它不适合什么再省得你踩坑。不适合对时延极敏感的任务aiAct每一步都要截图、规划、再执行比即时 API 更慢也更耗 token简单单步操作请直接用aiTap、aiInput这类即时接口。别把敏感页面发给公开模型Midscene 会把页面截图部分场景还包含 DOM发给 AI 模型含涉密信息的页面请优先用自托管模型细节见文档的数据隐私章节。Bridge 模式会忽略部分浏览器配置userAgent、视口尺寸、cookie 注入等选项在桥接模式下不生效因为它复用的是你真实浏览器的环境。高频问题Q运行时报Cannot access a chrome-extension:// URL of different extension A通常是其他扩展向页面注入了 iframe 或脚本与 Midscene 冲突按文档排查并禁用冲突扩展即可。Q用本地 Ollama 模型时出现 403 A设置环境变量OLLAMA_ORIGINS*允许扩展访问本地模型。Q同一脚本换到 Azure OpenAI 后点击位置偏移 A这是 Azure 端对大图缩放导致的坐标还原偏差可换官方 GPT-5 接口或用screenshotShrinkFactor预先缩小截图。 继续深入快速开始零代码体验3 字内用途上手入口桥接模式详解本地脚本接管 ChromeYAML 自动化脚本把指令固化成脚本扩展源码侧边栏与 Bridge 实现从最小的任务开始试——先拿一个你本周就要重复做的页面操作开刀验证一句指令能跑通再慢慢把流程搬进脚本。【免费下载链接】midsceneGUI Agent for E2E Testing项目地址: https://gitcode.com/GitHub_Trending/mid/midscene创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考 Midscene Chrome 扩展：三步把浏览器重复操作交给 AI
Midscene Chrome 扩展三步把浏览器重复操作交给 AI【免费下载链接】midsceneGUI Agent for E2E Testing项目地址: https://gitcode.com/GitHub_Trending/mid/midsceneMidscene Chrome 扩展是一个把 GUI Agent 装进浏览器侧边栏的自动化工具你用一句自然语言描述想做的事它就看着屏幕替你点击、输入和核对结果。如果你每天要重复做同一类网页操作——搜索商品、复制价格、填表单、核对页面上是否出现某个提示——这个扩展就是为这类活设计的。 它到底是什么概念速览可以把 Midscene 扩展理解成住在你浏览器侧边栏里的操作员它不读代码只读屏幕。对比维度传统脚本做法Midscene 扩展元素定位手写 CSS/XPath 选择器看截图按外观和位置找元素描述任务编写 TS/JS 代码输入一句自然语言验证结果检查 DOM 属性像人一样看画面是否出现预期内容运行环境启动新的无头浏览器复用你已登录的 ChromeBridge 模式⏱️ 十分钟上手路径整个过程按准备 → 安装 → 跑通 → 看结果四步走十分钟内可以完成第一次浏览器自动化。准备准备一个有 UI 定位能力的多模态模型如 Gemini、Qwen 系列、UI-TARS 等拿到模型服务地址和 API Key。Midscene 通过截图驱动不用把整棵 DOM 发给模型。安装从 Chrome 应用商店安装 Midscene 扩展如果访问受限也可以克隆仓库后本地构建git clone https://gitcode.com/GitHub_Trending/mid/midscene然后在扩展目录执行pnpm install和构建到chrome://extensions/以加载已解压的扩展程序方式安装产物。跑通第一个任务打开扩展侧边栏点设置图标把模型配置粘贴进去保存。打开任意网页在侧边栏输入一条符合当前页面的指令例如点击登录按钮点 Run。看到结果执行完成后右侧会展示每一步的截图、定位到的元素和结果。Midscene 还会生成可视化 HTML 报告记录动作、断言结果和 AI 的决策过程方便你回看它到底做了什么。 能力拆解四类能力覆盖了操作、取数、核对、接管四条主线先判断你的需求属于哪类再选对应入口。用自然语言操作页面aiAct它帮你在不写选择器的情况下完成多步操作包括点图标按钮、操作canvas和跨域 iframe 里的元素。什么时候用得上页面结构经常变、元素没有稳定 selector或者你要跑的是搜索 → 筛选 → 确认这类多步骤流程时。从网页提取结构化数据aiQuery它帮你按 schema 把页面上的内容取成 JSON比如商品列表的name和price。什么时候用得上采集报表数据、批量核对字段、把网页内容变成可入库的结构化数据时。用眼睛核对结果aiAssert它帮你以视觉方式验证界面状态判断颜色、高亮、布局、错误提示是否符合预期。什么时候用得上E2E 测试里做断言或流程末尾确认错误信息出现在邮箱输入框下方这类视觉结果时。Bridge 模式让本地脚本接管你的 Chrome它帮你把本地终端里的脚本接到桌面 Chrome 上复用浏览器已有的 cookies、插件和登录状态。什么时候用得上任务需要已登录账号或你想脚本干一半、人工补一刀man-in-the-loop时。 三个可直接抄的实战配方以下配方都可以先用扩展侧边栏验证指令再落到 YAML 脚本里跑。配方一每天监控 5 个商品的价格目标定时抓取 5 个商品页的价格和名称。触发方式写一份 YAML 脚本aiQuery提取{name, price}[]用系统定时任务在每天固定时间执行midscene ./prices.yaml。预期产出一份 JSON 结果和 HTML 报告可追加进你的表格或数据库。配方二登录流程回归自检目标验证登录后右上角出现用户名这条关键路径。触发方式YAML 脚本里ai步骤完成登录aiAssert: 右上角显示用户头像代码改动后手动或接入 CI 运行。预期产出通过/失败结论外加带截图和 AI 决策过程的可视化报告。配方三半自动处理已登录站点目标在你已登录的账号里执行一段重复操作脚本和人工可以交替接管。触发方式本地脚本通过AgentOverChromeBridge附着到当前标签页在扩展弹窗中点 Allow。预期产出操作直接发生在你自己的 Chrome 里报告照常生成中途需要人工介入时随时可以暂停脚本。⚠️ 边界与避坑先说清楚它不适合什么再省得你踩坑。不适合对时延极敏感的任务aiAct每一步都要截图、规划、再执行比即时 API 更慢也更耗 token简单单步操作请直接用aiTap、aiInput这类即时接口。别把敏感页面发给公开模型Midscene 会把页面截图部分场景还包含 DOM发给 AI 模型含涉密信息的页面请优先用自托管模型细节见文档的数据隐私章节。Bridge 模式会忽略部分浏览器配置userAgent、视口尺寸、cookie 注入等选项在桥接模式下不生效因为它复用的是你真实浏览器的环境。高频问题Q运行时报Cannot access a chrome-extension:// URL of different extension A通常是其他扩展向页面注入了 iframe 或脚本与 Midscene 冲突按文档排查并禁用冲突扩展即可。Q用本地 Ollama 模型时出现 403 A设置环境变量OLLAMA_ORIGINS*允许扩展访问本地模型。Q同一脚本换到 Azure OpenAI 后点击位置偏移 A这是 Azure 端对大图缩放导致的坐标还原偏差可换官方 GPT-5 接口或用screenshotShrinkFactor预先缩小截图。 继续深入快速开始零代码体验3 字内用途上手入口桥接模式详解本地脚本接管 ChromeYAML 自动化脚本把指令固化成脚本扩展源码侧边栏与 Bridge 实现从最小的任务开始试——先拿一个你本周就要重复做的页面操作开刀验证一句指令能跑通再慢慢把流程搬进脚本。【免费下载链接】midsceneGUI Agent for E2E Testing项目地址: https://gitcode.com/GitHub_Trending/mid/midscene创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考