Midscene 浏览器自动化 10 分钟速成指南

Midscene 浏览器自动化 10 分钟速成指南【免费下载链接】midsceneSee interfaces like a human. E2E testing in natural language.项目地址: https://gitcode.com/GitHub_Trending/mid/midsceneMidscene 是一款 AI 浏览器自动化工具装好 Chrome 扩展你说话浏览器干活。10 分钟你得到一个听话的自动化浏览器。 速览Midscene 扩展能帮你省什么上手前先看一张表确认它适不适合你维度说明适合谁想跑 Web 自动化、又不想手写选择器的人核心能力自然语言执行页面操作、提取结构化数据、校验界面状态省去什么不用搭浏览器自动化工程不用写操作代码前置条件Chrome 浏览器 一个有 UI 理解能力的多模态模型及其 API Key上手时长装扩展约 1 分钟跑通第一条指令约 10 分钟 扩展安装与模型配置三步搞定按你的身份二选一普通用户在 Chrome 应用商店搜索 Midscene 安装自带自动更新最省心。开发者或商店打不开的人从仓库 Releases 下载扩展包在chrome://extensions/打开开发者模式加载已解压的扩展。没有自动更新但扩展源码就在仓库里想改就改。两条路殊途同归一个听得懂人话的侧边栏。接下来是共同的三步在扩展列表打开 Midscene浏览器右侧出现侧边栏。点侧边栏设置图标把模型配置粘贴进去MIDSCENE_MODEL_BASE_URLhttps://你的模型服务端点 MIDSCENE_MODEL_API_KEY你的API-KEY MIDSCENE_MODEL_NAME你的模型名保存。配置就三行服务端点、API Key、模型名。变量名保留英文值换成你自己的。支持的模型与完整配置项见模型配置文档。加载完成后侧边栏第一屏就是指令输入框后面所有体验都从这里开始。✍️ 侧边栏三种玩法操作、提取、校验侧边栏里的指令就是大白话最常用三种一行一个操作aiAct点击登录按钮提取aiQuery页面中的商品{name: string, price: number}[]校验aiAssert页面顶部显示导航栏操作是给页面下命令提取是把页面内容变成 JSON校验是替你当裁判做断言。三样凑齐一个最小 E2E 测试的骨架就有了。其中aiQuery最常被用来抓商品、价格、订单号这类信息返回值直接是结构化数据方便后续入库或断言。把扩展理解成一位看得见屏幕的翻译官你说人话模型判断该碰哪个元素。指令在侧边栏跑通后换个皮就能原样搬进脚本await agent.aiAct(点击登录按钮); const products await agent.aiQuery(页面中的商品{name, price}[]); await agent.aiAssert(页面顶部显示导航栏);上面三行就是三条侧边栏指令的 API 等价写法。跑完还会生成一份可视化报告每一步的截图、模型判断和执行结果都画在时间线上出问题不用猜翻报告就行。从 Playground 到代码的完整衔接看快速开始。 Bridge 模式脚本接管你的日常浏览器痛点很实在脚本跑自动化总得另起一个光板浏览器登录态为零每次运行都得手动登录一遍。而你桌面 Chrome 里的 Cookie才是现成的免费通行证。Bridge 模式就是让终端脚本接管你天天用的 Chrome你手动登录脚本干活两者共用一套状态。自动化圈管这叫人肉回路人干登录这种带状态的事机器干重复劳动。扩展装好后默认在后台监听图标黄点监听中绿点已连接接上只需三步在终端安装依赖npm install midscene/web tsx写个最小脚本demo-bridge.tsimport { 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);运行tsx demo-bridge.tsChrome 弹出确认窗点 Allow新标签页随即交给脚本。脚本跑完页面里的登录态和 Cookie 原封不动留给你。两个高频坑一模型配置要写在终端侧不是浏览器侧很多人把它粘进扩展设置怎么都连不上二脚本要传本地文件时先在扩展详情页打开 Allow access to file URLs再从目标页面重连桥接。桥接服务默认只听127.0.0.1跨机器远程访问见Bridge 模式文档。 指令没反应、Bridge 连不上怎么查排错思路只有一个先分清是模型侧、扩展侧还是脚本侧的问题。多数情况不用翻源码顺着入口点一圈就能定位。下表按最常见症状给入口一行一条症状排查入口最常见原因指令执行了但页面无反应页面 DevTools 控制台其他扩展向页面注入了脚本与 Midscene 冲突模型请求报 403扩展设置页本地模型没配OLLAMA_ORIGINS*Bridge 连不上扩展 Bridge Mode 面板脚本没跑起来或确认窗没点 AllowBridge 脚本传不了本地文件扩展详情页没开 Allow access to file URLs 两个进阶入口浏览器自动化最烦的两件事——搭环境和登录——到这里都被绕开了。想继续玩 YAML 脚本看YAML 脚本文档。觉得有用顺手点个赞。【免费下载链接】midsceneSee interfaces like a human. E2E testing in natural language.项目地址: https://gitcode.com/GitHub_Trending/mid/midscene创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考