#通过 Chrome 插件快速体验

通过使用 Midscene.js Chrome 插件，你可以快速在任意网页上体验 Midscene 的主要功能，而无需编写任何代码。

该扩展与 npm @midscene/web 包共享了相同的代码，因此你可以将其视为 Midscene 的一个 Playground 或调试工具。

#准备工作

准备你想要使用的 AI 模型及其 API Key。你可以在 选择模型 文档中查看 Midscene.js 支持的模型。

#安装与配置

前往 Chrome 扩展商店安装 Midscene 扩展：Midscene

或下载安装包手动安装（不推荐，无法获得自动更新）：Releases

启动扩展（可能默认折叠在 Chrome 扩展列表中），通过粘贴 Key=Value 格式配置插件环境：

OPENAI_API_KEY="sk-replace-by-your-own"
# ...可能还有其他配置项，一并贴入

#开始体验

配置完成后，你可以立即开始使用 Midscene。它提供了多个关键操作 Tab，包括但不限于：

• Action: 与网页进行交互，这就是所谓的自动规划（Auto Planning）。比如

在搜索框中输入 Midscene
点击登录按钮

• Query: 从界面中提取 JSON 数据

提取页面中的用户 ID，返回 \{ id: string \}

• Assert: 验证页面

页面标题是 Midscene

• Tap: 在某个元素上点击，这就是所谓的即时操作（Instant Action）。

登录按钮

所有 Agent API 都能在 Playground 上直接调试和运行！交互、提取、验证三大类方法全覆盖，可视化操作和验证，让你的自动化开发效率飙升。

快来试试吧！

关于自动规划（Auto Planning）和即时操作（Instant Action）的区别，请参考 API 文档。

#想将 Midscene 集成到代码？

插件体验结束后，你可能想将 Midscene 集成到代码中。这里有几种不同集成形式的文档：

• 使用 YAML 格式的自动化脚本

• 使用 Chrome 插件的桥接模式
• 与 Puppeteer 集成
• 与 Playwright 集成

#FAQ

• 插件运行失败，提示 'Cannot access a chrome-extension:// URL of different extension'

这一般是与其他插件冲突所致，如页面已经被其他插件注入了 <iframe /> 或 <script />。

找到可疑插件：

1. 打开页面的调试器，找到被其他插件注入的 <iframe /> 或 <script />，一般 URL 是 chrome-extension://{这串就是ID}/... 格式，复制其 ID。
2. 打开 chrome://extensions/ ，用 cmd+f 找到相同 ID 的插件，禁用它。
3. 刷新页面，再次尝试。