#快速开始

Chrome Extension 是 Midscene 面向 Web 的 Playground。无需搭建项目，你就可以在网页中体验交互、数据提取和界面检查等核心能力。

本指南将带你配置模型、安装 Chrome Extension，并运行第一条自然语言指令。验证指令效果后，你可以通过 Agent API 将这些指令集成到自动化代码中。文末还列出了 Android、iOS、HarmonyOS 和桌面端的上手指南。

#配置模型

使用 Chrome Extension 前，需要先准备一个具备 UI 定位能力的多模态模型。

下面以豆包 Seed 2.1 Turbo 为例：

export MIDSCENE_MODEL_BASE_URL="https://ark.cn-beijing.volces.com/api/v3"
export MIDSCENE_MODEL_API_KEY="your-api-key"
export MIDSCENE_MODEL_NAME="doubao-seed-2-1-turbo-260628"
export MIDSCENE_MODEL_FAMILY="doubao-seed"

将 your-api-key 替换为你的 API Key。

如需使用千问（Qwen）、GLM、Gemini 或 GPT-5 等其他模型，请参考使用模型 API Key。

全部配置项请参考模型配置。

安装 Chrome Extension 后，将这组配置粘贴到设置中。

#安装 Chrome Extension

1. 点击下面的按钮，从 Chrome Web Store 安装 Midscene：

   

2. 在 Chrome 的扩展列表中打开 Midscene。浏览器右侧会出现 Midscene 侧边栏。

3. 点击侧边栏中的设置图标，将配置模型中的完整配置粘贴到设置页并保存。

常见问题

#完成第一次体验

打开任意网页，在 Midscene 侧边栏中输入符合当前页面内容的自然语言指令。例如：

• 规划并交互（aiAct）：点击登录按钮。
• 提取结构化数据（aiQuery）：页面中的商品，{name: string, price: number}[]。
• 检查界面（aiAssert）：页面顶部显示导航栏。

运行指令后，Midscene 会理解当前页面，并执行操作或返回结果。下面的案例展示了 Chrome Extension 自动填写 GitHub 注册表单的过程：

Prompt：填写 GitHub 注册表单并通过表单校验，但不要提交。

Midscene 会为每次任务生成完整报告，供开发者回溯操作过程。上述 Demo 的报告请参考：report.html

#从 Playground 集成到代码

Chrome Extension 与 @midscene/web 共享核心能力。在 Playground 中验证自然语言指令后，可以通过对应的 Agent API 将这些指令集成到 UI 测试脚本中：

// 规划并执行交互
await agent.aiAct('点击登录按钮');

// 提取结构化数据
const products = await agent.aiQuery<Array<{ name: string; price: number }>>(
  '页面中的商品，{name: string, price: number}[]',
);

// 检查界面
await agent.aiAssert('页面顶部显示导航栏');

以上代码只展示 API 的调用形式。要在浏览器项目中创建 Agent 并运行完整脚本，请继续阅读集成到 Playwright或集成到 Puppeteer。如需了解各类 API 的用途和选择方法，请阅读基本概念；所有参数详见 API 参考。

#在其他平台使用 Midscene

Midscene 在 Android、iOS、HarmonyOS 和桌面端也提供完整的自动化能力，并为每个平台提供对应的 Playground。使用前，需要先完成该平台的设备环境准备。例如，Android 平台需要安装并配置 adb。具体要求、Playground 启动方法和故障排查，请参考以下文档。