十分钟跑通 Midscene Chrome 扩展用自然语言驱动浏览器零门槛自动化【免费下载链接】midsceneGUI Agent for E2E Testing项目地址: https://gitcode.com/GitHub_Trending/mid/midscene打开一个商品列表页在浏览器右侧的 Midscene 侧边栏里敲下提取前五个商品的名称和价格回车几秒后结构化数据直接出现在面板里。这是 Midscene Chrome 扩展的日常用法把 AI 视觉模型装进浏览器用一句话完成点击、输入、取数和验证。它适合不想写选择器的测试工程师、需要采集页面数据的运营以及所有被重复网页操作磨掉耐心的普通用户。 先看结果一句自然语言能换来什么这一节只对比输入和输出你看完就知道它的价值在哪。你输入的话浏览器里发生的事点击登录按钮AI 定位按钮位置自动完成点击页面跳转到登录成功状态页面中的商品{name: string, price: number}[]返回一个商品数组每个元素带名称和价格字段页面顶部显示导航栏检查当前截图条件成立则通过否则报错并说明原因没有 CSS 选择器没有waitForSelector连元素在 DOM 里的层级都不用知道。Midscene 靠截图理解界面图标按钮、canvas 画出来的内容、跨域 iframe 里的元素只要人眼能看到它就能操作。Midscene Chrome 扩展指令输入、执行与结果都在浏览器侧边栏内完成 能干哪几类活办事、取数、验状态按你最终想达到的目标分扩展覆盖三类活对应 快速开始文档 中的三个核心 API。办事aiAct给一个目标比如点击登录按钮它会观察界面、规划步骤、逐个执行直到目标完成。适合多步骤、路径不确定的流程。取数aiQuery在提示词里描述要什么数据、什么结构比如页面中的商品{name: string, price: number}[]返回的就是可以直接喂给表格或脚本的结构化数据。验状态aiAssert描述预期画面比如购物车中有一件商品并且页面显示了小计金额条件成立正常结束不成立则抛错并附上模型判断的原因。这三类能力组合起来就是操作 → 抓取 → 校验的完整闭环正好对应自动化测试最常见的诉求。 从装好到跑通第一次这一节带你从安装走到第一次执行成功全程大约十分钟。安装分两条支线。普通用户直接在 Chrome 应用商店搜Midscene点添加到 Chrome一分钟搞定。走开发路线的话先克隆仓库地址https://gitcode.com/GitHub_Trending/mid/midscene构建出 apps/chrome-extension/dist 后打开chrome://extensions/启用开发者模式选加载已解压的扩展程序并指向该目录方便你改代码即时生效。装好后还差一件事配置模型。Midscene 依赖一个具备 UI 定位能力的多模态模型打开侧边栏的设置图标把文档里的配置整段粘贴进去保存。之后打开任意网页在侧边栏输入一句和当前页面内容匹配的话——比如在一个有登录页的站点里输入点击登录按钮点运行。第一次执行成功的样子是AI 高亮出它找到的元素光标真的动到按钮上页面响应面板里给出执行记录。到这里你就已经跨过了最难的一步。 进阶玩法远程桥接、独立测试场、跨平台基础用法跑通后三个进阶方向值得了解每一项都配一句定位和适用场景。桥接模式Bridge Mode定位是让本地终端脚本接管你正在用的 Chrome。脚本复用你浏览器的登录态、cookie 和插件天然解决自动化脚本反复登录的问题也支持在流程中随时人工插手。跨机器控制时把服务端监听改到allowRemoteAccess: true插件端填一下 Bridge Server URL 即可。import { AgentOverChromeBridge } from midscene/web/bridge-mode; const agent new AgentOverChromeBridge(); await agent.connectNewTabWithUrl(https://www.bing.com); await agent.ai(type AI 101 and hit Enter);桥接模式终端脚本与桌面 Chrome 之间建立连接弹窗确认后即可接管独立测试场Playground定位是不动真页面先试一遍。复杂的指令先在隔离环境里跑确认 AI 理解对了再落到正式流程适合调试交互逻辑、打磨提示词。跨平台同一套 Agent API 延伸到 Android、iOS、HarmonyOS 和桌面端每个平台都有对应文档和 Playground适合团队一套写法覆盖 Web 与移动端的测试。 完整案例走一遍搜商品、取价格、验结果选一个最常见的端到端场景在电商网站查商品并核对价格区间。你在 Action 入口输入两条指令第一条是在搜索框输入无线耳机点击搜索按钮第二条是提取前 5 个商品的名称、价格和店铺。执行完Query 返回类似这样的结构[{name: 某品牌无线耳机, price: 299, store: 官方旗舰}, {name: 降噪蓝牙耳机, price: 899, store: 数码专营店}]再用 Assert 补一句所有商品的价格都低于 1000 元校验通过即闭环。对比传统写法你要自己处理选择器变更、等待异步加载、写结果解析页面一改版脚本就挂这里的代价只是改一句自然语言。 遇到问题先看这里四个高频症状对号入座。页面报Cannot access a chrome-extension:// URL of different extension多半是别的扩展往页面注入了 iframe 或 script 造成冲突。在开发者工具里复制那个chrome-extension://开头的 URL 中的扩展 ID到chrome://extensions/里禁用对应扩展刷新重试。用本地 Ollama 模型报 403设置环境变量OLLAMA_ORIGINS*允许扩展访问本地模型服务。手动安装的扩展不更新应用商店版本才能自动更新走 Releases 或本地加载的用户升级后需要手动重新加载。桥接模式下模型连不上模型配置要写在终端环境变量里不是浏览器侧这点和侧边栏用法相反详见桥接模式文档。⚙️ 它是怎么跑起来的技术上不神秘TypeScript 加 React 构建扩展界面rsbuild 做构建遵循 Chrome 扩展 Manifest V3 规范AI 侧走截图加视觉语言模型的路线不依赖 DOM 结构所以才能跨 Web、Android、iOS 和桌面端共用一套 Agent APIpackages/core 和 packages/web-integration 是核心实现所在。 现在就可以三件小事今天就能做完装上扩展、粘贴模型配置在一个你天天开的页面上跑第一条aiAct。把某次手工取数的流程改写成aiQuery让结果直接变成 JSON。试一次桥接模式感受脚本接管已登录浏览器是什么体验。工具的价值取决于你交给它的第一个任务——从你重复最多的那件网页操作开始就好。【免费下载链接】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 侧边栏里敲下提取前五个商品的名称和价格回车几秒后结构化数据直接出现在面板里。这是 Midscene Chrome 扩展的日常用法把 AI 视觉模型装进浏览器用一句话完成点击、输入、取数和验证。它适合不想写选择器的测试工程师、需要采集页面数据的运营以及所有被重复网页操作磨掉耐心的普通用户。 先看结果一句自然语言能换来什么这一节只对比输入和输出你看完就知道它的价值在哪。你输入的话浏览器里发生的事点击登录按钮AI 定位按钮位置自动完成点击页面跳转到登录成功状态页面中的商品{name: string, price: number}[]返回一个商品数组每个元素带名称和价格字段页面顶部显示导航栏检查当前截图条件成立则通过否则报错并说明原因没有 CSS 选择器没有waitForSelector连元素在 DOM 里的层级都不用知道。Midscene 靠截图理解界面图标按钮、canvas 画出来的内容、跨域 iframe 里的元素只要人眼能看到它就能操作。Midscene Chrome 扩展指令输入、执行与结果都在浏览器侧边栏内完成 能干哪几类活办事、取数、验状态按你最终想达到的目标分扩展覆盖三类活对应 快速开始文档 中的三个核心 API。办事aiAct给一个目标比如点击登录按钮它会观察界面、规划步骤、逐个执行直到目标完成。适合多步骤、路径不确定的流程。取数aiQuery在提示词里描述要什么数据、什么结构比如页面中的商品{name: string, price: number}[]返回的就是可以直接喂给表格或脚本的结构化数据。验状态aiAssert描述预期画面比如购物车中有一件商品并且页面显示了小计金额条件成立正常结束不成立则抛错并附上模型判断的原因。这三类能力组合起来就是操作 → 抓取 → 校验的完整闭环正好对应自动化测试最常见的诉求。 从装好到跑通第一次这一节带你从安装走到第一次执行成功全程大约十分钟。安装分两条支线。普通用户直接在 Chrome 应用商店搜Midscene点添加到 Chrome一分钟搞定。走开发路线的话先克隆仓库地址https://gitcode.com/GitHub_Trending/mid/midscene构建出 apps/chrome-extension/dist 后打开chrome://extensions/启用开发者模式选加载已解压的扩展程序并指向该目录方便你改代码即时生效。装好后还差一件事配置模型。Midscene 依赖一个具备 UI 定位能力的多模态模型打开侧边栏的设置图标把文档里的配置整段粘贴进去保存。之后打开任意网页在侧边栏输入一句和当前页面内容匹配的话——比如在一个有登录页的站点里输入点击登录按钮点运行。第一次执行成功的样子是AI 高亮出它找到的元素光标真的动到按钮上页面响应面板里给出执行记录。到这里你就已经跨过了最难的一步。 进阶玩法远程桥接、独立测试场、跨平台基础用法跑通后三个进阶方向值得了解每一项都配一句定位和适用场景。桥接模式Bridge Mode定位是让本地终端脚本接管你正在用的 Chrome。脚本复用你浏览器的登录态、cookie 和插件天然解决自动化脚本反复登录的问题也支持在流程中随时人工插手。跨机器控制时把服务端监听改到allowRemoteAccess: true插件端填一下 Bridge Server URL 即可。import { AgentOverChromeBridge } from midscene/web/bridge-mode; const agent new AgentOverChromeBridge(); await agent.connectNewTabWithUrl(https://www.bing.com); await agent.ai(type AI 101 and hit Enter);桥接模式终端脚本与桌面 Chrome 之间建立连接弹窗确认后即可接管独立测试场Playground定位是不动真页面先试一遍。复杂的指令先在隔离环境里跑确认 AI 理解对了再落到正式流程适合调试交互逻辑、打磨提示词。跨平台同一套 Agent API 延伸到 Android、iOS、HarmonyOS 和桌面端每个平台都有对应文档和 Playground适合团队一套写法覆盖 Web 与移动端的测试。 完整案例走一遍搜商品、取价格、验结果选一个最常见的端到端场景在电商网站查商品并核对价格区间。你在 Action 入口输入两条指令第一条是在搜索框输入无线耳机点击搜索按钮第二条是提取前 5 个商品的名称、价格和店铺。执行完Query 返回类似这样的结构[{name: 某品牌无线耳机, price: 299, store: 官方旗舰}, {name: 降噪蓝牙耳机, price: 899, store: 数码专营店}]再用 Assert 补一句所有商品的价格都低于 1000 元校验通过即闭环。对比传统写法你要自己处理选择器变更、等待异步加载、写结果解析页面一改版脚本就挂这里的代价只是改一句自然语言。 遇到问题先看这里四个高频症状对号入座。页面报Cannot access a chrome-extension:// URL of different extension多半是别的扩展往页面注入了 iframe 或 script 造成冲突。在开发者工具里复制那个chrome-extension://开头的 URL 中的扩展 ID到chrome://extensions/里禁用对应扩展刷新重试。用本地 Ollama 模型报 403设置环境变量OLLAMA_ORIGINS*允许扩展访问本地模型服务。手动安装的扩展不更新应用商店版本才能自动更新走 Releases 或本地加载的用户升级后需要手动重新加载。桥接模式下模型连不上模型配置要写在终端环境变量里不是浏览器侧这点和侧边栏用法相反详见桥接模式文档。⚙️ 它是怎么跑起来的技术上不神秘TypeScript 加 React 构建扩展界面rsbuild 做构建遵循 Chrome 扩展 Manifest V3 规范AI 侧走截图加视觉语言模型的路线不依赖 DOM 结构所以才能跨 Web、Android、iOS 和桌面端共用一套 Agent APIpackages/core 和 packages/web-integration 是核心实现所在。 现在就可以三件小事今天就能做完装上扩展、粘贴模型配置在一个你天天开的页面上跑第一条aiAct。把某次手工取数的流程改写成aiQuery让结果直接变成 JSON。试一次桥接模式感受脚本接管已登录浏览器是什么体验。工具的价值取决于你交给它的第一个任务——从你重复最多的那件网页操作开始就好。【免费下载链接】midsceneGUI Agent for E2E Testing项目地址: https://gitcode.com/GitHub_Trending/mid/midscene创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考