通过 Chrome 插件快速体验

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

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

准备工作

请先准备好以下任意模型的 API 密钥:OpenAI GPT 4o, Qwen-2.5-VL, UI-TARS 或任何其他支持的模型。我们稍后会用到。

你可以在 选择模型 文档中查看 Midscene.js 支持的模型和配置。

安装与配置

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

启动扩展(可能默认折叠在 Chrome 扩展列表中),通过粘贴 Key=Value 格式配置插件环境:

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

开始体验

配置完成后,你可以立即开始使用 Midscene。它一共有三个关键操作 Tab:

  • Action: 与网页进行交互,如 "在搜索框中输入 Midscene" 或 "点击登录按钮"。
  • Query: 从界面中提取 JSON 数据,如 "提取页面中的用户 ID,返回 { id: string }"。
  • Assert: 执行断言,如 "页面标题是 Midscene"。

快来试试吧!

想将 Midscene 集成到代码?

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

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. 刷新页面,再次尝试。