Midscene Chrome 扩展3 步装好用自然语言跑通浏览器自动化【免费下载链接】midsceneGUI Agent for E2E Testing项目地址: https://gitcode.com/GitHub_Trending/mid/midscene每次发版你得手动把后台的二十几个关键路径点一遍月底对账又要把三四个网页里的数字一个个抄进表格。想自动化就得自己写脚本、自己维护选择器。Midscene Chrome 扩展把这件事换了一种做法你在浏览器侧边栏里打一句自然语言指令AI 看当前页面的截图自己找元素、点按钮、填表单页面改了布局你的指令往往也不用动。3 分钟装好扩展配上一个多模态模型 整个流程只有三步克隆仓库进入扩展目录构建git clone https://gitcode.com/GitHub_Trending/mid/midscene cd midscene/apps/chrome-extension pnpm install pnpm run build打开chrome://extensions/右上角开启开发者模式点加载已解压的扩展程序选择刚构建出的dist目录。准备一个具备 UI 定位能力的多模态模型OpenAI 兼容接口即可把 Base URL、API Key、模型名称这几项填进扩展的设置页并保存。完成后打开任意网页浏览器右侧会出现 Midscene 侧边栏这就是你输入指令的入口。三种指令覆盖点、取、验侧边栏里最常用的其实是三类指令官方在文档里把它们分别对应到aiAct、aiQuery、aiAssert三个 API你想解决的问题你输入的内容你会看到什么让页面执行操作点击登录按钮AI 定位按钮并完成点击侧边栏展示执行轨迹提取结构化数据页面中的商品{name: string, price: number}[]直接返回 JSON 数组可粘进表格或脚本校验页面状态页面顶部显示导航栏符合则通过不符合则标记失败除了指令本身还有两件值得留意的事每一步都有截图依据。指令执行时 AI 是基于当时页面的截图做判断的哪一步看哪里、点了什么事后可逐步回放。任务结束自动生成报告。报告存在运行目录midscene_run下包含时间线、每步截图和提取结果出问题时不用翻控制台猜。动手试试把商品页的价格批量搬进表格拿一个真实高频的场景走一遍你输入打开任意商品列表页在侧边栏输入提取页面中的商品{name: string, price: number}[]。它做了什么AI 截取当前页面逐个识别商品卡片区域把名称和价格对应起来整理成结构化结果。结果你拿到一段 JSON 数组直接粘进表格就是比价数据。想让结果只含价格低于某个值的商品把那句话换一种说法再说一遍就行全程不写一行代码。对每天重复做、但每次都不完全一样的网页操作这种说一次就做一次的粒度比写死的脚本更耐用。进阶脚本接上你正在用的本地 Chrome 上手之后有两个技巧能明显提效。1. Bridge 桥接模式复用你本地的登录态。测试时最麻烦的往往不是操作本身而是脚本里那个干净的浏览器没有你的登录状态。Bridge 模式让终端里的 Node 脚本直接控制你桌面上正在跑的 Chrome——脚本能读到你的 cookies 和插件你和脚本还能共用同一个浏览器。最小例子import { AgentOverChromeBridge } from midscene/web/bridge-mode; const agent new AgentOverChromeBridge(); await agent.connectNewTabWithUrl(https://www.bing.com); await agent.ai(在搜索框输入 AI 101 并回车); await agent.destroy();运行后扩展会弹出确认窗口点 Allow 后新标签页就归脚本管了。扩展图标上的徽标也会反映状态黄点监听中绿点已连接。2. 从侧边栏走向 CI。在侧边栏里验证过的指令可以直接用对应的 Agent API 搬进 Playwright 或 Puppeteer 脚本更省事的是写成 YAML 脚本一条midscene ./bing.yaml命令就跑完整个流程。YAML 里加上bridgeMode: newTabWithUrl定时任务里也能复用本地浏览器不用再维护一套 headless 环境。跑不顺时先看这 3 条现象运行报Cannot access a chrome-extension:// URL of different extension。多半是另一个扩展往同个页面注入了 iframe 或脚本和 Midscene 冲突了。在开发者工具里找到 URL 以chrome-extension://开头的元素按扩展 ID 去扩展页禁用它刷新页面再试。现象用 Ollama 本地模型时报 403。多半是 Ollama 默认策略不允许扩展访问。设置环境变量OLLAMA_ORIGINS*后重启 Ollama 即可。现象Bridge 模式的脚本提示找不到模型或不响应。多半是模型配置只贴进了扩展设置页——桥接模式读的是终端侧Node 环境的变量。把MIDSCENE_MODEL_BASE_URL、MIDSCENE_MODEL_API_KEY等改成终端环境变量再运行。资源入口快速开始含模型配置apps/site/docs/zh/quick-start.mdxBridge 桥接模式完整文档apps/site/docs/zh/bridge-mode.mdx核心引擎源码packages/core/src/扩展前端源码apps/chrome-extension/src/可直接参考的 YAML 脚本样例packages/cli/tests/midscene_scripts/Midscene Chrome 扩展把看懂页面这件最费功夫的事交给了 AI你只需要负责说出要做什么。【免费下载链接】midsceneGUI Agent for E2E Testing项目地址: https://gitcode.com/GitHub_Trending/mid/midscene创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考 Midscene Chrome 扩展：3 步装好，用自然语言跑通浏览器自动化
Midscene Chrome 扩展3 步装好用自然语言跑通浏览器自动化【免费下载链接】midsceneGUI Agent for E2E Testing项目地址: https://gitcode.com/GitHub_Trending/mid/midscene每次发版你得手动把后台的二十几个关键路径点一遍月底对账又要把三四个网页里的数字一个个抄进表格。想自动化就得自己写脚本、自己维护选择器。Midscene Chrome 扩展把这件事换了一种做法你在浏览器侧边栏里打一句自然语言指令AI 看当前页面的截图自己找元素、点按钮、填表单页面改了布局你的指令往往也不用动。3 分钟装好扩展配上一个多模态模型 整个流程只有三步克隆仓库进入扩展目录构建git clone https://gitcode.com/GitHub_Trending/mid/midscene cd midscene/apps/chrome-extension pnpm install pnpm run build打开chrome://extensions/右上角开启开发者模式点加载已解压的扩展程序选择刚构建出的dist目录。准备一个具备 UI 定位能力的多模态模型OpenAI 兼容接口即可把 Base URL、API Key、模型名称这几项填进扩展的设置页并保存。完成后打开任意网页浏览器右侧会出现 Midscene 侧边栏这就是你输入指令的入口。三种指令覆盖点、取、验侧边栏里最常用的其实是三类指令官方在文档里把它们分别对应到aiAct、aiQuery、aiAssert三个 API你想解决的问题你输入的内容你会看到什么让页面执行操作点击登录按钮AI 定位按钮并完成点击侧边栏展示执行轨迹提取结构化数据页面中的商品{name: string, price: number}[]直接返回 JSON 数组可粘进表格或脚本校验页面状态页面顶部显示导航栏符合则通过不符合则标记失败除了指令本身还有两件值得留意的事每一步都有截图依据。指令执行时 AI 是基于当时页面的截图做判断的哪一步看哪里、点了什么事后可逐步回放。任务结束自动生成报告。报告存在运行目录midscene_run下包含时间线、每步截图和提取结果出问题时不用翻控制台猜。动手试试把商品页的价格批量搬进表格拿一个真实高频的场景走一遍你输入打开任意商品列表页在侧边栏输入提取页面中的商品{name: string, price: number}[]。它做了什么AI 截取当前页面逐个识别商品卡片区域把名称和价格对应起来整理成结构化结果。结果你拿到一段 JSON 数组直接粘进表格就是比价数据。想让结果只含价格低于某个值的商品把那句话换一种说法再说一遍就行全程不写一行代码。对每天重复做、但每次都不完全一样的网页操作这种说一次就做一次的粒度比写死的脚本更耐用。进阶脚本接上你正在用的本地 Chrome 上手之后有两个技巧能明显提效。1. Bridge 桥接模式复用你本地的登录态。测试时最麻烦的往往不是操作本身而是脚本里那个干净的浏览器没有你的登录状态。Bridge 模式让终端里的 Node 脚本直接控制你桌面上正在跑的 Chrome——脚本能读到你的 cookies 和插件你和脚本还能共用同一个浏览器。最小例子import { AgentOverChromeBridge } from midscene/web/bridge-mode; const agent new AgentOverChromeBridge(); await agent.connectNewTabWithUrl(https://www.bing.com); await agent.ai(在搜索框输入 AI 101 并回车); await agent.destroy();运行后扩展会弹出确认窗口点 Allow 后新标签页就归脚本管了。扩展图标上的徽标也会反映状态黄点监听中绿点已连接。2. 从侧边栏走向 CI。在侧边栏里验证过的指令可以直接用对应的 Agent API 搬进 Playwright 或 Puppeteer 脚本更省事的是写成 YAML 脚本一条midscene ./bing.yaml命令就跑完整个流程。YAML 里加上bridgeMode: newTabWithUrl定时任务里也能复用本地浏览器不用再维护一套 headless 环境。跑不顺时先看这 3 条现象运行报Cannot access a chrome-extension:// URL of different extension。多半是另一个扩展往同个页面注入了 iframe 或脚本和 Midscene 冲突了。在开发者工具里找到 URL 以chrome-extension://开头的元素按扩展 ID 去扩展页禁用它刷新页面再试。现象用 Ollama 本地模型时报 403。多半是 Ollama 默认策略不允许扩展访问。设置环境变量OLLAMA_ORIGINS*后重启 Ollama 即可。现象Bridge 模式的脚本提示找不到模型或不响应。多半是模型配置只贴进了扩展设置页——桥接模式读的是终端侧Node 环境的变量。把MIDSCENE_MODEL_BASE_URL、MIDSCENE_MODEL_API_KEY等改成终端环境变量再运行。资源入口快速开始含模型配置apps/site/docs/zh/quick-start.mdxBridge 桥接模式完整文档apps/site/docs/zh/bridge-mode.mdx核心引擎源码packages/core/src/扩展前端源码apps/chrome-extension/src/可直接参考的 YAML 脚本样例packages/cli/tests/midscene_scripts/Midscene Chrome 扩展把看懂页面这件最费功夫的事交给了 AI你只需要负责说出要做什么。【免费下载链接】midsceneGUI Agent for E2E Testing项目地址: https://gitcode.com/GitHub_Trending/mid/midscene创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考