企业官网建设流程全解析

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

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

Midscene.js 是一个 GUI 自动化框架，它的 Chrome 扩展把 AI 浏览器自动化搬进了你的日常浏览器：不写选择器，用自然语言描述动作，由多模态视觉模型看截图定位元素并执行。适合需要网页巡检、数据采集、状态验证的开发者，以及不想维护复杂自动化脚本的新手。

对比传统脚本：维护成本差在哪

传统浏览器自动化的日常，是写一次选择器、然后追着每次改版改一遍。以"搜索一个关键词并提取结果"为例：

Midscene 的定位元素只靠截图，不依赖 DOM。图标按钮、自定义控件、canvas 内容这类没有语义标注的元素也能处理，这是它与传统脚本最大的差异。

从商店安装到配置模型

这一章结束时，侧边栏能接收你的第一条指令。

1. 从 Chrome 应用商店搜索 Midscene，点击"添加到 Chrome"。
2. 打开chrome://extensions，启用"开发者模式"，确认扩展已加载（手动安装方式见文末 FAQ 第 3 条）。
3. 点击浏览器右上角扩展图标，Midscene 侧边栏从浏览器右侧展开。
4. 点侧边栏设置图标，粘贴一份模型配置，包含MIDSCENE_MODEL_INIT_CONFIG_JSON、MIDSCENE_MODEL_NAME两个字段（模型名需为具备 UI 定位能力的多模态模型），保存。

配置只填一次。没准备好模型服务的，可以先跳到下章看流程，再回头补配置。

跑通第一个任务：搜索加提取

以 Google 搜索页为例，两条指令完成"操作 + 取数"的最小闭环。

1. 打开 Google 搜索页，点击 Midscene 图标展开侧边栏。
2. 在 Action 标签的输入框填入：type "Midscene.js" and click search，点 Run。浏览器自动完成输入和点击，侧边栏逐帧展示元素定位框和截图。
3. 切到 Query 标签，填入：Results on the page, {title: string, url: string}[]，再点 Run。
4. 查看输出：得到结构化的搜索结果数组，可直接贴进表格或脚本。

输入输出都可直接复制，指令里出现的每一句，后面进代码时原样可用。

用 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 成本会明显上升，建议先用缓存机制降低调试开销

常见问题：现象、原因与解法

1. 侧边栏无响应，控制台报Cannot access a chrome-extension:// URL of different extension原因：其他扩展往页面注入了 iframe 或脚本，与 Midscene 冲突。 解法：开发者工具中找到该chrome-extension://节点，记下扩展 ID，到chrome://extensions禁用它，刷新页面重试。

2. 内网 Ollama 模型调用返回 403原因：扩展的跨域请求被 Ollama 默认拒绝。 解法：启动 Ollama 前设置OLLAMA_ORIGINS="*"环境变量。

3. 无法访问 Chrome 应用商店，装不上扩展原因：商店在国内网络环境不可达。 解法：从官方 Releases 下载构建包，开发者模式下手动加载解压目录。注意手动安装不会自动更新。

4. 每次桥接都要手动点 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