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

Midscene Chrome扩展快速上手指南3步实现自然语言操控浏览器【免费下载链接】midsceneGUI Agent for E2E Testing项目地址: https://gitcode.com/GitHub_Trending/mid/midsceneMidscene Chrome扩展用自然语言控制浏览器页面完成操作、数据提取与界面校验。它用截图视觉识别解决选择器脆弱和视觉校验缺失两个 UI 自动化痛点。适合开发者、测试工程师和普通用户。Midscene 是一个 GUI 自动化工具通过视觉语言模型实现跨平台 UI 自动化。扩展侧边栏的三类指令Action、Query 与 Assert打开 Midscene 扩展后浏览器右侧出现指令面板三类指令覆盖大多数网页自动化场景Action 操作让浏览器执行动作如点击搜索框并输入关键词Query 数据让模型返回结构化数据如提取商品名称和价格返回 JSONAssert 校验检查界面状态如页面顶部出现导航栏扩展先对当前页面截图再由模型基于截图识别并执行不依赖 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个步骤 克隆仓库git clone https://gitcode.com/GitHub_Trending/mid/midscene配置模型准备一个具备 UI 定位能力的多模态模型将配置粘贴到扩展设置中保存安装扩展从 Chrome Web Store 安装开发版构建 Chrome 扩展源码 后在chrome://extensions/加载输出目录执行第一条指令打开任意网页在侧边栏输入点击搜索框并搜索 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创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考