尧图网站建设 
Midscene Chrome 扩展一句话驱动浏览器自动化的实战教程【免费下载链接】midsceneGUI Agent for E2E Testing项目地址: https://gitcode.com/GitHub_Trending/mid/midscene还在每天手动填表单、点同样的按钮、逐个商品抄价格吗Midscene Chrome 扩展是一款 AI 浏览器自动化工具你用一句自然语言描述操作它通过截图识别页面自动帮你完成点击、输入和校验无需编写选择器。你天天手点的浏览器操作其实最不值得手动做传统浏览器自动化最大的痛点不是“做不了”而是“难维护”脚本靠 CSS 选择器或 XPath 定位元素页面一改版脚本就失效纯读 DOM 的方式够不到canvas里的按钮和跨域 iframe而且它只能判断“元素存在”无法判断“界面长得对不对”。Midscene 走的是另一条路它只靠截图识别元素人眼能看到的它就能操作页面结构怎么改都无所谓。装好扩展后浏览器右侧会弹出它的侧边栏面板输入指令、查看执行结果、观察元素定位框都在这一处完成。它的能力浓缩成三个“动词”分别对应三种高频需求aiAct —— 执行操作。输入“点击登录按钮输入验证码并提交”AI 会把这句话拆成步骤并逐步执行这是使用频率最高的一条。aiQuery —— 提取数据。输入“页面中的商品{name: string, price: number}[]”结果按 JSON 结构返回可以直接接进表格或脚本。aiAssert —— 校验界面。输入“页面顶部显示导航栏”它对着渲染后的画面断言而不是只查 DOM 节点在不在。日常“点一下、抓一抓、验一验”的需求这三个动词基本都覆盖了。️ 三步跑通第一条自然语言指令第一步获取代码并构建扩展git clone https://gitcode.com/GitHub_Trending/mid/midscene cd midscene pnpm install cd apps/chrome-extension pnpm run build构建产物在dist目录是一份完整的未打包扩展。如果你的环境不方便构建也可以直接从 Chrome 网上应用店安装现成版本还能自动更新。第二步以开发者模式加载扩展打开chrome://extensions/页面开启右上角“开发者模式”开关点“加载已解压的扩展程序”选中dist目录。工具栏出现 Midscene 图标右侧即弹出侧边栏。第三步粘贴模型配置运行第一条指令点面板里的设置图标粘贴一组具备 UI 定位能力的多模态模型配置官方文档列出了多家模型提供商和本地 Ollama 的完整示例保存后即可开工。打开任意网页输入“在百度搜索 Midscene”并点击运行浏览器会自己完成搜索。完整配置字段见快速开始指南。Playground跑脚本前先看见 AI 看见了什么问题指令跑失败了你不知道是 AI 看错了页面还是你的话说得不够明确。解法Playground 给你一个可视化调试台。左侧面板连上 Playground 服务后实时展示当前页面的 UI 上下文带元素定位框的截图右侧是目标网页你选择 Action / Query / Assert 任一类输入指令立即看到它点在哪、查到什么。它的价值在于让“改指令”变得便宜跑一次、看落点、改一句话、再跑一次不用反复起脚本。等你在面板里验证出一句稳定的指令可以直接把同样的措辞搬进代码——扩展与midscene/webSDK 共享同一套核心能力面板里试过的话在脚本里同样有效。桥接模式让终端脚本接管你的日常浏览器问题自动化框架新开的浏览器永远是“干净”的登不进你的内部系统而扩展面板虽然方便却不好做批量、循环这类需要脚本的事。解法Bridge 模式允许本地终端脚本控制你桌面上正在用的 Chrome。脚本既可以附着当前标签页也可以新开一个并复用你浏览器的 cookies、登录态和插件——文档里把这叫“man-in-the-loop”人机各干各的活共用一个浏览器。用起来很简单扩展安装后默认在后台监听图标黄点表示监听中绿点表示已连接脚本端从midscene/web/bridge-mode引入AgentOverChromeBridge调用connectCurrentTab()或connectNewTabWithUrl()即可。脚本运行时扩展会弹出确认窗点 “Allow” 允许本次连接或点 “Always Allow” 永久放行。桥接服务默认监听本机127.0.0.1:3766跨机器使用时在 Bridge Mode 页面填远程地址即可。YAML 脚本里加一行bridgeMode: newTabWithUrl也能启用同样能力完整示例见桥接模式文档。一个容易漏的细节脚本需要上传本地文件时去chrome://extensions/的 Midscene 详情里开启 “Allow access to file URLs”再重新连接。同一套指令延伸进 Android 与 iOS浏览器自动化只是起点。Midscene 把同一套自然语言指令铺到了 Android、iOS 和 HarmonyOS 设备上——“打开设置查看当前系统版本”这句话在手机上照样成立。Android Playground 通过 adb 连接真机或模拟器把手机画面投屏到浏览器里你能实时看着 AI 一步步点下去左侧执行时间线同时展示每一步的规划与定位结果。iOS 侧也有对应的 Playground通过 WebDriverAgent 连接设备指令动词与 Web 端完全一致。每个平台的设备准备、adb 或模拟器配置都有单独的文档跟着平台指南走即可。⚠️ 常见翻车场景与排查办法运行时报Cannot access a chrome-extension:// URL of different extension通常是另一个扩展往页面注入了 iframe 或脚本与 Midscene 冲突。打开页面开发者工具找到 URL 以chrome-extension://开头的注入节点记下扩展 ID到chrome://extensions/禁用它刷新重试。本地 Ollama 模型返回 403设置环境变量OLLAMA_ORIGINS*允许扩展访问本地模型服务然后重启脚本。桥接模式脚本跑起来却没反应先看扩展图标的状态点——黄点是监听中绿点才是已连接仍是黄点就确认脚本和浏览器是否在同一网络、是否用了默认的本机127.0.0.1:3766地址。手机连不上、屏幕投不出来确认 USB 调试已开启、adb能列出设备再重新插拔连接iOS 侧重启 WebDriverAgent 服务再试。适合谁用从哪儿入手适合谁需要给 UI 写回归测试的开发者、想把重复流程脚本化的测试同学以及天天在浏览器里做机械操作的普通用户——前两者看的是免维护的自动化后者看的是省下的时间。建议路径先在扩展面板里练熟三个动词aiAct / aiQuery / aiAssert→ 稳定后把指令搬进 YAML 或代码参考 packages/cli/tests/midscene_scripts/ 下的真实脚本样例 → 想深挖原理就看核心源码元素定位与任务规划的逻辑都集中在这一层。【免费下载链接】midsceneGUI Agent for E2E Testing项目地址: https://gitcode.com/GitHub_Trending/mid/midscene创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考 Midscene Chrome 扩展：一句话驱动浏览器自动化的实战教程
Midscene Chrome 扩展一句话驱动浏览器自动化的实战教程【免费下载链接】midsceneGUI Agent for E2E Testing项目地址: https://gitcode.com/GitHub_Trending/mid/midscene还在每天手动填表单、点同样的按钮、逐个商品抄价格吗Midscene Chrome 扩展是一款 AI 浏览器自动化工具你用一句自然语言描述操作它通过截图识别页面自动帮你完成点击、输入和校验无需编写选择器。你天天手点的浏览器操作其实最不值得手动做传统浏览器自动化最大的痛点不是“做不了”而是“难维护”脚本靠 CSS 选择器或 XPath 定位元素页面一改版脚本就失效纯读 DOM 的方式够不到canvas里的按钮和跨域 iframe而且它只能判断“元素存在”无法判断“界面长得对不对”。Midscene 走的是另一条路它只靠截图识别元素人眼能看到的它就能操作页面结构怎么改都无所谓。装好扩展后浏览器右侧会弹出它的侧边栏面板输入指令、查看执行结果、观察元素定位框都在这一处完成。它的能力浓缩成三个“动词”分别对应三种高频需求aiAct —— 执行操作。输入“点击登录按钮输入验证码并提交”AI 会把这句话拆成步骤并逐步执行这是使用频率最高的一条。aiQuery —— 提取数据。输入“页面中的商品{name: string, price: number}[]”结果按 JSON 结构返回可以直接接进表格或脚本。aiAssert —— 校验界面。输入“页面顶部显示导航栏”它对着渲染后的画面断言而不是只查 DOM 节点在不在。日常“点一下、抓一抓、验一验”的需求这三个动词基本都覆盖了。️ 三步跑通第一条自然语言指令第一步获取代码并构建扩展git clone https://gitcode.com/GitHub_Trending/mid/midscene cd midscene pnpm install cd apps/chrome-extension pnpm run build构建产物在dist目录是一份完整的未打包扩展。如果你的环境不方便构建也可以直接从 Chrome 网上应用店安装现成版本还能自动更新。第二步以开发者模式加载扩展打开chrome://extensions/页面开启右上角“开发者模式”开关点“加载已解压的扩展程序”选中dist目录。工具栏出现 Midscene 图标右侧即弹出侧边栏。第三步粘贴模型配置运行第一条指令点面板里的设置图标粘贴一组具备 UI 定位能力的多模态模型配置官方文档列出了多家模型提供商和本地 Ollama 的完整示例保存后即可开工。打开任意网页输入“在百度搜索 Midscene”并点击运行浏览器会自己完成搜索。完整配置字段见快速开始指南。Playground跑脚本前先看见 AI 看见了什么问题指令跑失败了你不知道是 AI 看错了页面还是你的话说得不够明确。解法Playground 给你一个可视化调试台。左侧面板连上 Playground 服务后实时展示当前页面的 UI 上下文带元素定位框的截图右侧是目标网页你选择 Action / Query / Assert 任一类输入指令立即看到它点在哪、查到什么。它的价值在于让“改指令”变得便宜跑一次、看落点、改一句话、再跑一次不用反复起脚本。等你在面板里验证出一句稳定的指令可以直接把同样的措辞搬进代码——扩展与midscene/webSDK 共享同一套核心能力面板里试过的话在脚本里同样有效。桥接模式让终端脚本接管你的日常浏览器问题自动化框架新开的浏览器永远是“干净”的登不进你的内部系统而扩展面板虽然方便却不好做批量、循环这类需要脚本的事。解法Bridge 模式允许本地终端脚本控制你桌面上正在用的 Chrome。脚本既可以附着当前标签页也可以新开一个并复用你浏览器的 cookies、登录态和插件——文档里把这叫“man-in-the-loop”人机各干各的活共用一个浏览器。用起来很简单扩展安装后默认在后台监听图标黄点表示监听中绿点表示已连接脚本端从midscene/web/bridge-mode引入AgentOverChromeBridge调用connectCurrentTab()或connectNewTabWithUrl()即可。脚本运行时扩展会弹出确认窗点 “Allow” 允许本次连接或点 “Always Allow” 永久放行。桥接服务默认监听本机127.0.0.1:3766跨机器使用时在 Bridge Mode 页面填远程地址即可。YAML 脚本里加一行bridgeMode: newTabWithUrl也能启用同样能力完整示例见桥接模式文档。一个容易漏的细节脚本需要上传本地文件时去chrome://extensions/的 Midscene 详情里开启 “Allow access to file URLs”再重新连接。同一套指令延伸进 Android 与 iOS浏览器自动化只是起点。Midscene 把同一套自然语言指令铺到了 Android、iOS 和 HarmonyOS 设备上——“打开设置查看当前系统版本”这句话在手机上照样成立。Android Playground 通过 adb 连接真机或模拟器把手机画面投屏到浏览器里你能实时看着 AI 一步步点下去左侧执行时间线同时展示每一步的规划与定位结果。iOS 侧也有对应的 Playground通过 WebDriverAgent 连接设备指令动词与 Web 端完全一致。每个平台的设备准备、adb 或模拟器配置都有单独的文档跟着平台指南走即可。⚠️ 常见翻车场景与排查办法运行时报Cannot access a chrome-extension:// URL of different extension通常是另一个扩展往页面注入了 iframe 或脚本与 Midscene 冲突。打开页面开发者工具找到 URL 以chrome-extension://开头的注入节点记下扩展 ID到chrome://extensions/禁用它刷新重试。本地 Ollama 模型返回 403设置环境变量OLLAMA_ORIGINS*允许扩展访问本地模型服务然后重启脚本。桥接模式脚本跑起来却没反应先看扩展图标的状态点——黄点是监听中绿点才是已连接仍是黄点就确认脚本和浏览器是否在同一网络、是否用了默认的本机127.0.0.1:3766地址。手机连不上、屏幕投不出来确认 USB 调试已开启、adb能列出设备再重新插拔连接iOS 侧重启 WebDriverAgent 服务再试。适合谁用从哪儿入手适合谁需要给 UI 写回归测试的开发者、想把重复流程脚本化的测试同学以及天天在浏览器里做机械操作的普通用户——前两者看的是免维护的自动化后者看的是省下的时间。建议路径先在扩展面板里练熟三个动词aiAct / aiQuery / aiAssert→ 稳定后把指令搬进 YAML 或代码参考 packages/cli/tests/midscene_scripts/ 下的真实脚本样例 → 想深挖原理就看核心源码元素定位与任务规划的逻辑都集中在这一层。【免费下载链接】midsceneGUI Agent for E2E Testing项目地址: https://gitcode.com/GitHub_Trending/mid/midscene创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考