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

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

【免费下载链接】midsceneSee interfaces like a human. E2E testing in natural language.项目地址: https://gitcode.com/GitHub_Trending/mid/midscene

Midscene 是一款 AI 浏览器自动化工具，装好 Chrome 扩展，你说话，浏览器干活。10 分钟，你得到一个"听话"的自动化浏览器。

📋 速览：Midscene 扩展能帮你省什么

上手前先看一张表，确认它适不适合你：

🧩 扩展安装与模型配置，三步搞定

按你的身份二选一：

• 普通用户：在 Chrome 应用商店搜索 Midscene 安装，自带自动更新，最省心。
• 开发者或商店打不开的人：从仓库 Releases 下载扩展包，在chrome://extensions/打开开发者模式，加载已解压的扩展。没有自动更新，但扩展源码就在仓库里，想改就改。

两条路殊途同归：一个听得懂人话的侧边栏。接下来是共同的三步：

1. 在扩展列表打开 Midscene，浏览器右侧出现侧边栏。
2. 点侧边栏设置图标，把模型配置粘贴进去：

MIDSCENE_MODEL_BASE_URL=https://你的模型服务端点 MIDSCENE_MODEL_API_KEY=你的API-KEY MIDSCENE_MODEL_NAME=你的模型名

3. 保存。配置就三行：服务端点、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：你手动登录，脚本干活，两者共用一套状态。自动化圈管这叫"人肉回路"：人干登录这种带状态的事，机器干重复劳动。扩展装好后默认在后台监听（图标黄点=监听中，绿点=已连接），接上只需三步：

1. 在终端安装依赖：

npm install @midscene/web tsx

2. 写个最小脚本demo-bridge.ts：

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');

3. 运行tsx demo-bridge.ts，Chrome 弹出确认窗，点 "Allow"，新标签页随即交给脚本。

脚本跑完，页面里的登录态和 Cookie 原封不动留给你。两个高频坑：一，模型配置要写在终端侧，不是浏览器侧，很多人把它粘进扩展设置，怎么都连不上；二，脚本要传本地文件时，先在扩展详情页打开 "Allow access to file URLs"，再从目标页面重连桥接。

桥接服务默认只听127.0.0.1，跨机器远程访问见Bridge 模式文档。

🩺 指令没反应、Bridge 连不上怎么查

排错思路只有一个：先分清是模型侧、扩展侧还是脚本侧的问题。多数情况不用翻源码，顺着入口点一圈就能定位。下表按最常见症状给入口，一行一条：

🔗 两个进阶入口

浏览器自动化最烦的两件事——搭环境和登录——到这里都被绕开了。想继续玩 YAML 脚本，看YAML 脚本文档。觉得有用，顺手点个赞。

【免费下载链接】midsceneSee interfaces like a human. E2E testing in natural language.项目地址: https://gitcode.com/GitHub_Trending/mid/midscene