企业官网建设流程全解析

Midscene Chrome扩展快速上手指南：3步实现自然语言操控浏览器

【免费下载链接】midsceneGUI Agent for E2E Testing项目地址: https://gitcode.com/GitHub_Trending/mid/midscene

Midscene Chrome扩展用自然语言控制浏览器页面完成操作、数据提取与界面校验。它用截图视觉识别解决选择器脆弱和视觉校验缺失两个 UI 自动化痛点。适合开发者、测试工程师和普通用户。

Midscene 是一个 GUI 自动化工具，通过视觉语言模型实现跨平台 UI 自动化。

扩展侧边栏的三类指令：Action、Query 与 Assert

打开 Midscene 扩展后，浏览器右侧出现指令面板，三类指令覆盖大多数网页自动化场景：

• Action 操作：让浏览器执行动作，如"点击搜索框并输入关键词"
• Query 数据：让模型返回结构化数据，如"提取商品名称和价格，返回 JSON"
• Assert 校验：检查界面状态，如"页面顶部出现导航栏"

扩展先对当前页面截图，再由模型基于截图识别并执行，不依赖 DOM 选择器，页面样式变化后只要视觉结构不变仍可操作。Query 还支持指定返回结果的字段结构，例如要求返回{name, price}数组时会直接得到 JSON。面板同时显示实时截图与模型决策过程，便于排查它为什么操作某个元素。输入指令后点击 Run 执行，复杂指令建议先到 Playground 验证（见下文）。

Bridge模式：本地脚本远程操控浏览器

Bridge模式让本机运行的 Node.js 脚本接管桌面版 Chrome，复用其登录态与 Cookie 环境。

• 人机混合操作：自动化与人工步骤交替进行，适合需要人工介入的流程
• 复用登录状态：操作真实浏览器页面，避免重复认证
• 跨设备控制：脚本与浏览器运行在不同机器上时，在扩展的 Bridge Mode 面板填写 Bridge Server 地址即可连接

安装扩展后运行脚本，在浏览器弹出的确认对话框中点击 Allow 建立连接，支持"始终允许"且可在 Bridge Mode 面板重置。扩展图标以黄点、绿点区分监听与已连接状态。YAML 脚本运行器中也可通过web字段设置bridgeMode启用该模式。

Playground：调试复杂指令的沙盒环境

Playground 提供独立的执行环境，复杂指令可在其中调试而不影响实际流程。

• 实时页面上下文：左侧展示页面截图、右侧展示执行结果，便于定位指令失败原因
• 指令复用：在 Playground 中验证通过的指令，可直接复用到 YAML 脚本或代码集成

在侧边栏的 Playground 入口打开当前页面，输入相同指令并点击 Run，即可对照截图与执行结果调试。

从零到第一条自动化指令的4个步骤

1. 📦 克隆仓库：git clone https://gitcode.com/GitHub_Trending/mid/midscene
2. 配置模型：准备一个具备 UI 定位能力的多模态模型，将配置粘贴到扩展设置中保存
3. 安装扩展：从 Chrome Web Store 安装；开发版构建 Chrome 扩展源码 后，在chrome://extensions/加载输出目录
4. 执行第一条指令：打开任意网页，在侧边栏输入"点击搜索框并搜索 Midscene"，点击 Run

使用 Midscene 扩展的常见避坑点

• ⚠️指令模糊："获取数据"过于笼统 → 写明确"提取表格中所有产品的名称、价格和库存"
• 页面未加载就点击：动态页面直接点击会失败 → 在指令中加入等待，如"等待页面加载完成后点击登录按钮"
• 扩展冲突：报Cannot access a chrome-extension:// URL of different extension时，说明其他扩展注入了脚本 → 在开发者工具中定位冲突扩展并禁用
• 本地 Ollama 返回 403：设置环境变量OLLAMA_ORIGINS="*"允许扩展访问
• 开启远程访问后暴露 Bridge：服务端默认只监听 127.0.0.1，使用allowRemoteAccess时需限制在可信网络内

Midscene 把自然语言指令与视觉模型结合，让浏览器完成操作、数据提取与界面校验。打开扩展输入第一条指令，开始调试你的第一个自动化流程。

【免费下载链接】midsceneGUI Agent for E2E Testing项目地址: https://gitcode.com/GitHub_Trending/mid/midscene