Midscene.js 谷歌浏览器插件使用指南

一、安装步骤

1. 安装插件

打开 Chrome 浏览器，访问 Chrome 应用商店，搜索 "Midscene"，点击添加到 Chrome 即可。

插件地址（直接访问）：

https://chromewebstore.google.com/detail/midscene/gbldofcpkknbggpkmbdaefngejllnief

2. 启动插件

安装后扩展默认折叠在 Chrome 扩展列表中，点击展开，在浏览器右侧会看到名为 "Midscene" 的侧边栏。

二、配置 AI 模型

启动插件后，需要配置使用的 AI 模型服务。有两种配置方式：

方式一：环境变量配置

在系统环境变量中写入以下配置（以千问模型为例）：

MIDSCENE_MODEL_BASE_URL="https://dashscope.aliyuncs.com/compatible-mode/v1"
MIDSCENE_MODEL_API_KEY="sk-xxx"
MIDSCENE_MODEL_NAME="qwen3.5-plus"
MIDSCENE_MODEL_FAMILY="qwen3.5" 

配置后可以点下的Save and Verify Model按钮验证模型配置正确性，如均显示OK则表示配置正确。

方式二：插件内直接配置

在 Midscene 侧边栏中粘贴 Key=Value 格式配置：

OPENAI_BASE_URL=https://xxx

OPENAI_API_KEY=sk-xxxxx

MIDSCENE_MODEL_NAME=xxx

推荐模型

三、使用场景

场景 1：零代码快速体验（适合普通用户）

直接在浏览器中操作：

1. 打开任意网页

2. 点击 Midscene 侧边栏

3. 在输入框用自然语言描述操作，例如：

• "在搜索框输入 '耳机'"

• "点击登录按钮"

• "滚动到页面底部"

  4.AI 自动执行对应操作

场景 2：桥接模式（Bridge Mode，适合开发者）

通过插件连接外部脚本，实现更复杂的自动化控制：

第一步：在插件中切换到 "Bridge Mode" 标签页，点击 "Allow connection"

第二步：编写脚本，如 demo-new-tab.ts：

import { AgentOverChromeBridge } from "@midscene/web/bridge-mode";

const agent = new AgentOverChromeBridge();

await agent.connectNewTabWithUrl("http://localhost:8000/login.html");

await agent.ai('在"用户名"输入框里面输入"admin"');

await agent.ai('在"密码"输入框里面输入"1234"');

await agent.ai('点击"登录"按钮');

await agent.aiAssert("跳转'列表'页面");

第三步：运行脚本

场景 3：YAML 自动化脚本（适合团队协作）

无需写代码，团队任何成员都能编写测试脚本：

# sauce-demo.yaml

url: https://www.saucedemo.com

tasks:

- name: 登录并提取信息

steps:

- ai: '输入用户名 "standard_user"'

- ai: '输入密码 "secret_sauce"'

- ai: '点击登录按钮'

- aiQuery:

name: 商品信息

content: '提取所有商品名称和价格，以 JSON 格式输出'

- aiAssert:

content: '页面显示商品列表'

运行命令：

npm i -g @midscene/cli

midscene ./sauce-demo.yaml --headed # 有界面模式

midscene ./sauce-demo.yaml # 无头模式

场景 4：数据提取与断言

提取数据为 JSON：

const data = await agent.aiQuery('提取页面上所有商品名称和价格，以 JSON 格式');

console.log(data);

// 输出：{ "products": [{ "name": "商品A", "price": 99.9 }, ...] }

断言验证：

await agent.aiAssert('页面显示"登录成功"提示');

await agent.aiAssert('URL 跳转到 /dashboard');

四、典型操作示例

五、注意事项

1. 执行速度：因为需要 AI 推理，每次操作需要几秒钟

2. 敏感信息：用户名密码等需在提示词中传递，无法隐藏

3. 网络要求：需要网络访问 AI 模型服务

4. 复杂操作：滑块验证码等复杂行为可能无法通过自然语言完美模拟

总结：Chrome 插件方式最适合快速体验和零代码自动化场景，配置好 AI 模型后，直接用自然语言控制浏览器即可。开发者则可通过桥接模式或 YAML 脚本做更复杂的集成。