Midscene Chrome扩展：自然语言3步完成AI浏览器自动化

Midscene Chrome扩展自然语言3步完成AI浏览器自动化【免费下载链接】midsceneGUI Agent for E2E Testing项目地址: https://gitcode.com/GitHub_Trending/mid/midsceneMidscene.js 是一个 GUI 自动化框架它的 Chrome 扩展把 AI 浏览器自动化搬进了你的日常浏览器不写选择器用自然语言描述动作由多模态视觉模型看截图定位元素并执行。适合需要网页巡检、数据采集、状态验证的开发者以及不想维护复杂自动化脚本的新手。对比传统脚本维护成本差在哪传统浏览器自动化的日常是写一次选择器、然后追着每次改版改一遍。以搜索一个关键词并提取结果为例传统脚本Playwright 风格Midscene 侧边栏代码/输入量约 20 行含选择器、等待、异步处理两句自然语言页面改版后选择器失效逐一定位重写指令不变模型重新看图定位依赖条件依赖 DOM 结构与语义标注依赖截图人眼能看到的它就能点Midscene 的定位元素只靠截图不依赖 DOM。图标按钮、自定义控件、canvas 内容这类没有语义标注的元素也能处理这是它与传统脚本最大的差异。从商店安装到配置模型这一章结束时侧边栏能接收你的第一条指令。从 Chrome 应用商店搜索 Midscene点击添加到 Chrome。打开chrome://extensions启用开发者模式确认扩展已加载手动安装方式见文末 FAQ 第 3 条。点击浏览器右上角扩展图标Midscene 侧边栏从浏览器右侧展开。点侧边栏设置图标粘贴一份模型配置包含MIDSCENE_MODEL_INIT_CONFIG_JSON、MIDSCENE_MODEL_NAME两个字段模型名需为具备 UI 定位能力的多模态模型保存。配置只填一次。没准备好模型服务的可以先跳到下章看流程再回头补配置。跑通第一个任务搜索加提取以 Google 搜索页为例两条指令完成操作 取数的最小闭环。打开 Google 搜索页点击 Midscene 图标展开侧边栏。在 Action 标签的输入框填入type Midscene.js and click search点 Run。浏览器自动完成输入和点击侧边栏逐帧展示元素定位框和截图。切到 Query 标签填入Results on the page, {title: string, url: string}[]再点 Run。查看输出得到结构化的搜索结果数组可直接贴进表格或脚本。输入输出都可直接复制指令里出现的每一句后面进代码时原样可用。用 Bridge 模式复用登录态登录态场景电商后台、企业内部系统下自动化新建的会话拿不到已登录状态而 Bridge 模式直接驱动你桌面上的 Chrome复用全部 Cookie 与插件是杠杆最大的进阶功能。什么时候用脚本需要带登录态执行、或需要人工随时接管页面时。怎么用侧边栏打开 Bridge Mode 面板点 Listening for connection模型配置写在 Node 侧而非浏览器侧。const agent new AgentOverChromeBridge(); await agent.connectCurrentTab(); await agent.aiAction(type Midscene.js, click search button);终端运行脚本后扩展弹出确认框点 Allow或 Always Allow即可接管当前标签页。若脚本要上传本地文件需先在扩展 Details 里打开 Allow access to file URLs 权限。桥接客户端的实现在 bridge-mode 目录YAML 脚本只需在 web 段加一行bridgeMode: newTabWithUrl即可走桥接见 bridge-mode 文档。把页面送进全屏 Playground 调试复杂交互不必在真实工作页面里反复试错。侧边栏的 send to fullscreen playground 把当前页面投进独立全屏环境操作不影响原页面执行结果与错误逐帧可见。调试稳定后同样的指令可以直接带进脚本或 YAML 批处理任务。能力边界支持什么不支持什么它基于截图 多模态模型工作因此任何能截图的界面都能接Chrome 扩展桌面 Chrome含 Bridge 模式Android / iOS / HarmonyOS真机控制需先配置 adb / 设备环境桌面端Windows、macOS、Linux同一套aiAct/aiQuery/aiAssertAPI 跨端通用限制如实列出必须自备模型 API Key或内网 Ollama每步操作都有一次模型推理速度受服务响应影响离线环境不可用毫秒级高频交互、精确到像素的操作不适合大批量任务 token 成本会明显上升建议先用缓存机制降低调试开销常见问题现象、原因与解法侧边栏无响应控制台报Cannot access a chrome-extension:// URL of different extension原因其他扩展往页面注入了 iframe 或脚本与 Midscene 冲突。 解法开发者工具中找到该chrome-extension://节点记下扩展 ID到chrome://extensions禁用它刷新页面重试。内网 Ollama 模型调用返回 403原因扩展的跨域请求被 Ollama 默认拒绝。 解法启动 Ollama 前设置OLLAMA_ORIGINS*环境变量。无法访问 Chrome 应用商店装不上扩展原因商店在国内网络环境不可达。 解法从官方 Releases 下载构建包开发者模式下手动加载解压目录。注意手动安装不会自动更新。每次桥接都要手动点 Allow原因默认每次连接请求都需要人工确认。 解法首次弹窗选 Always Allow之后可在 Bridge Mode 面板重置该授权。资源与下一步仓库内 Quick start 文档 覆盖模型配置与扩展安装细节CLI 包 提供 YAML 批量执行入口示例项目可直接参考 web-integration 演示。社区入口在官方文档页底部的 Discord 与 X 账号 midscene_ai。建议先在侧边栏把每条指令跑通、确认输出结构符合预期再进代码或 YAML断言类检查适合放进 CI 当回归手段。按这个顺序用日常巡检任务几天内就能搬过去。【免费下载链接】midsceneGUI Agent for E2E Testing项目地址: https://gitcode.com/GitHub_Trending/mid/midscene创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考