Midscene 完整指南零代码用 Chrome 扩展跑通 AI 浏览器自动化【免费下载链接】midsceneGUI Agent for E2E Testing项目地址: https://gitcode.com/GitHub_Trending/mid/midscene假设你一天的任务清单是这样9 点看新闻站首页头条11 点从监控面板里提取当日数据14 点检查内部 OA 审批中心的状态。Midscene 是一个开源的 AI 浏览器自动化项目它的 Chrome 扩展让你不写一行脚本、用一句自然语言就能完成这些任务。本文按安装、三种指令、进阶模式三部分带你走完流程最后给出一个完整案例。什么是 Midscene自然语言浏览器自动化适合谁一句话定位Midscene 让多模态模型看懂浏览器画面按你的描述直接完成页面操作不再依赖脆弱的 CSS 选择器。开发者先在侧边栏用几句话验证页面的可操作再把验证过的指令通过 Agent API 搬进测试代码。测试工程师把重复巡检任务写成自然语言断言用执行报告跟踪通过与失败。普通用户零代码完成取数、点按钮这类日常事务。 Midscene 最快安装路径两条路线与第一次运行两种安装方式按场景选商店版普通用户在 Chrome Web Store 搜索Midscene点击添加到 Chrome再从扩展列表打开它右侧出现控制侧边栏。调试版开发者先进入apps/chrome-extension/目录执行npm run build打开chrome://extensions/开启开发者模式点击加载已解压的扩展程序选择生成的dist目录即可。第一次运行把多模态模型的配置粘贴进侧边栏设置页并保存打开任一新闻站在 Action 输入框敲入点击页面第一条新闻标题并执行——大约 10 秒内浏览器替你点完这就是你的第一份 AI 浏览器自动化成果。 三种指令类型与示例Action、Query、Assert侧边栏把操作归纳为 3 种指令分别对应 3 类场景场景内部系统批量录入指令Action在审批中心逐条打开待办输入同意并提交效果AI 把目标拆成点击、输入序列并按序执行省去重复操作。场景天气页数据提取指令Query各城市今日天气{city: string, weather: string, temp: number}[]效果返回结构化 JSON 数组脚本可直接消费。场景监控面板状态巡检指令Assert页面顶部显示全部系统正常且没有红色告警块效果输出通过或不通过适合定期检查和自动化测试。走得更远Playground 全屏调试与 Bridge 远程桥接调试较长流程时可从侧边栏打开全屏 Playground它是独立的执行空间逐步展示执行进度、截图与报错且不影响你真实的工作标签页多个任务可以并行开启、对照观察结果。如果想在脚本里唤起浏览器用Bridge 模式在本地终端跑一段 SDK 脚本就能控制桌面上真实 Chrome 的标签页。它支持手动登录后由脚本接着跑、复用浏览器已有登录态、从开发机控制测试环境的浏览器三种用法。import { AgentOverChromeBridge } from midscene/web/bridge-mode; const agent new AgentOverChromeBridge(); await agent.connectCurrentTab(); await agent.aiAct(点击内网首页的请假审批入口); const title await agent.aiQuery(当前页面标题string); await agent.destroy();脚本运行后扩展弹出确认框点一次 Allow 即完成握手。完整配置见 bridge-mode 文档。 不止浏览器Android 与 iOS 设备自动化同一套指令可以延伸到手机端Android 侧连接设备后就能启动应用、填表操作iOS 侧同样可以驱动手机指令基本复用、无需重写。端到端跑一遍内部 OA 巡检以一个真实巡检流程走完全程登录打开 OA 首页手动登录一次保持登录态。状态确认Assert页面左侧菜单包含审批中心且右上角显示当前用户名确认页面就绪。数据提取Query待审批列表{title: string, applicant: string, time: string}[]结果存成 JSON。对比归档次日再跑一次同样的 Query与昨日结果做差量比对。共 4 步走完全流程每条指令都是一句可复用的自然语言。⚠️ 遇到问题时常见现象与解决办法现象装完无响应或侧边栏不出现。原因扩展未启用或模型配置未保存。解决从扩展列表打开 Midscene再回设置页检查配置是否完整。现象执行报错Cannot access a chrome-extension:// URL of different extension。原因其他扩展向页面注入了脚本造成干扰。解决在开发者工具里从chrome-extension://链接复制扩展 ID禁用对应扩展后刷新重试。现象用本地 Ollama 模型时出现 403。原因Ollama 默认限制了浏览器端可访问的来源。解决设置环境变量OLLAMA_ORIGINS*后重启 Ollama。现象调试版构建失败或产物缺失。原因扩展依赖多个 workspace 包未全部构建时产物不完整。解决先把依赖包构建好再回到apps/chrome-extension/重新构建。它靠什么实现技术栈五件套TypeScript扩展与 SDK 共享类型定义减少集成错误。React侧边栏与 Playground 均为组件化界面便于快速迭代。rsbuild一条构建命令产出扩展的dist产物。Manifest V3遵循最新的 Chrome 扩展规范后台服务更稳定、隔离更好。AI 视觉模型基于截图定位元素不依赖页面结构因此对任何网站都通用。下一步建议今天装好商店版打开新闻站让第一条 Action 成功运行。本周写两条 Query头条、天气习惯结构化返回的用法。之后用 Bridge Agent API 把验证过的指令搬进测试流程接入每日巡检更多细节见 快速开始文档。【免费下载链接】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/midscene假设你一天的任务清单是这样9 点看新闻站首页头条11 点从监控面板里提取当日数据14 点检查内部 OA 审批中心的状态。Midscene 是一个开源的 AI 浏览器自动化项目它的 Chrome 扩展让你不写一行脚本、用一句自然语言就能完成这些任务。本文按安装、三种指令、进阶模式三部分带你走完流程最后给出一个完整案例。什么是 Midscene自然语言浏览器自动化适合谁一句话定位Midscene 让多模态模型看懂浏览器画面按你的描述直接完成页面操作不再依赖脆弱的 CSS 选择器。开发者先在侧边栏用几句话验证页面的可操作再把验证过的指令通过 Agent API 搬进测试代码。测试工程师把重复巡检任务写成自然语言断言用执行报告跟踪通过与失败。普通用户零代码完成取数、点按钮这类日常事务。 Midscene 最快安装路径两条路线与第一次运行两种安装方式按场景选商店版普通用户在 Chrome Web Store 搜索Midscene点击添加到 Chrome再从扩展列表打开它右侧出现控制侧边栏。调试版开发者先进入apps/chrome-extension/目录执行npm run build打开chrome://extensions/开启开发者模式点击加载已解压的扩展程序选择生成的dist目录即可。第一次运行把多模态模型的配置粘贴进侧边栏设置页并保存打开任一新闻站在 Action 输入框敲入点击页面第一条新闻标题并执行——大约 10 秒内浏览器替你点完这就是你的第一份 AI 浏览器自动化成果。 三种指令类型与示例Action、Query、Assert侧边栏把操作归纳为 3 种指令分别对应 3 类场景场景内部系统批量录入指令Action在审批中心逐条打开待办输入同意并提交效果AI 把目标拆成点击、输入序列并按序执行省去重复操作。场景天气页数据提取指令Query各城市今日天气{city: string, weather: string, temp: number}[]效果返回结构化 JSON 数组脚本可直接消费。场景监控面板状态巡检指令Assert页面顶部显示全部系统正常且没有红色告警块效果输出通过或不通过适合定期检查和自动化测试。走得更远Playground 全屏调试与 Bridge 远程桥接调试较长流程时可从侧边栏打开全屏 Playground它是独立的执行空间逐步展示执行进度、截图与报错且不影响你真实的工作标签页多个任务可以并行开启、对照观察结果。如果想在脚本里唤起浏览器用Bridge 模式在本地终端跑一段 SDK 脚本就能控制桌面上真实 Chrome 的标签页。它支持手动登录后由脚本接着跑、复用浏览器已有登录态、从开发机控制测试环境的浏览器三种用法。import { AgentOverChromeBridge } from midscene/web/bridge-mode; const agent new AgentOverChromeBridge(); await agent.connectCurrentTab(); await agent.aiAct(点击内网首页的请假审批入口); const title await agent.aiQuery(当前页面标题string); await agent.destroy();脚本运行后扩展弹出确认框点一次 Allow 即完成握手。完整配置见 bridge-mode 文档。 不止浏览器Android 与 iOS 设备自动化同一套指令可以延伸到手机端Android 侧连接设备后就能启动应用、填表操作iOS 侧同样可以驱动手机指令基本复用、无需重写。端到端跑一遍内部 OA 巡检以一个真实巡检流程走完全程登录打开 OA 首页手动登录一次保持登录态。状态确认Assert页面左侧菜单包含审批中心且右上角显示当前用户名确认页面就绪。数据提取Query待审批列表{title: string, applicant: string, time: string}[]结果存成 JSON。对比归档次日再跑一次同样的 Query与昨日结果做差量比对。共 4 步走完全流程每条指令都是一句可复用的自然语言。⚠️ 遇到问题时常见现象与解决办法现象装完无响应或侧边栏不出现。原因扩展未启用或模型配置未保存。解决从扩展列表打开 Midscene再回设置页检查配置是否完整。现象执行报错Cannot access a chrome-extension:// URL of different extension。原因其他扩展向页面注入了脚本造成干扰。解决在开发者工具里从chrome-extension://链接复制扩展 ID禁用对应扩展后刷新重试。现象用本地 Ollama 模型时出现 403。原因Ollama 默认限制了浏览器端可访问的来源。解决设置环境变量OLLAMA_ORIGINS*后重启 Ollama。现象调试版构建失败或产物缺失。原因扩展依赖多个 workspace 包未全部构建时产物不完整。解决先把依赖包构建好再回到apps/chrome-extension/重新构建。它靠什么实现技术栈五件套TypeScript扩展与 SDK 共享类型定义减少集成错误。React侧边栏与 Playground 均为组件化界面便于快速迭代。rsbuild一条构建命令产出扩展的dist产物。Manifest V3遵循最新的 Chrome 扩展规范后台服务更稳定、隔离更好。AI 视觉模型基于截图定位元素不依赖页面结构因此对任何网站都通用。下一步建议今天装好商店版打开新闻站让第一条 Action 成功运行。本周写两条 Query头条、天气习惯结构化返回的用法。之后用 Bridge Agent API 把验证过的指令搬进测试流程接入每日巡检更多细节见 快速开始文档。【免费下载链接】midsceneGUI Agent for E2E Testing项目地址: https://gitcode.com/GitHub_Trending/mid/midscene创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
