使用 Chrome 插件的桥接模式（Bridge Mode）#

使用 Midscene 的 Chrome 插件的桥接模式，你可以用本地脚本控制桌面版本的 Chrome。你的脚本可以连接到新标签页或当前已激活的标签页。

使用桌面版本的 Chrome 可以让你复用已有的 cookie、插件、页面状态等。你可以使用自动化脚本与操作者互动，来完成你的任务。

准备工作#

1. 配置 OpenAI API Key，或 自定义模型和服务商

# 更新为你自己的 Key
export OPENAI_API_KEY="sk-abcdefghijklmnopqrstuvwxyz"

2. 安装 Midscene 浏览器插件

第一步：安装依赖#

npm install @midscene/web tsx --save-dev

第二步：编写脚本#

编写并保存以下代码为 ./demo-new-tab.ts。

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

const sleep = (ms) => new Promise((r) => setTimeout(r, ms));
Promise.resolve(
  (async () => {
    const agent = new AgentOverChromeBridge();

    // 这个方法将连接到你的桌面 Chrome 的新标签页
    // 记得启动你的 Chrome 插件，并点击 'allow connection' 按钮。否则你会得到一个 timeout 错误
    await agent.connectNewTabWithUrl("https://www.bing.com");

    // 这些方法与普通 Midscene agent 相同
    await agent.ai('type "AI 101" and hit Enter');
    await sleep(3000);

    await agent.aiAssert("there are some search results");
    await agent.destroy();
  })()
);

第三步：运行脚本#

启动你的桌面 Chrome。启动 Midscene 插件，并切换到 'Bridge Mode' 标签页。点击 "Allow connection"。

运行你的脚本

tsx demo-new-tab.ts

执行脚本后，你应该看到 Chrome 插件的状态展示切换为 'connected'，并且新标签页已打开。现在这个标签页由你的脚本控制。

API#

除了 普通的 Agent 接口，AgentOverChromeBridge 还提供了一些额外的接口来控制桌面 Chrome。

connectCurrentTab(options?: { trackingActiveTab?: boolean })#

连接到当前已激活的标签页。

如果 trackingActiveTab 为 true，则 agent 将始终跟踪当前激活的标签页。例如，如果你切换到另一个标签页或打开一个新的标签页，agent 将跟踪最新激活的标签页。否则，agent 将只跟踪你最初连接的标签页。

connectNewTabWithUrl(url: string, options?: { trackingActiveTab?: boolean })#

创建一个新标签页，并立即连接到它。

destroy#

销毁连接。

更多接口#

Agent 中的常用接口（如 aiAction，aiQuery 等）请阅读 API 参考。

在 YAML 自动化脚本中使用桥接模式#

Yaml 格式的自动化脚本 是 Midscene 提供给开发者的一种编写自动化脚本的方式。通过使用 yaml 格式，脚本会变得易于阅读和编写。

在 Yaml 脚本中使用桥接模式时，需要配置 target 中的 bridgeMode 属性。如果想要使用当前标签页，设置为 currentTab，否则设置为 newTabWithUrl。

例如，以下脚本将会通过 Chrome 插件的桥接模式打开一个新的标签页：

target:
  url: https://www.bing.com
+ bridgeMode: newTabWithUrl
tasks:

运行脚本：

midscene ./bing.yaml

在运行脚本后，记得要启动 Chrome 插件，并点击 'Allow connection' 按钮。

不支持的选项#

在桥接模式下，以下选项将不会生效（它们将遵循桌面浏览器的设置）：

• userAgent

• viewportWidth

• viewportHeight

• viewportScale

• waitForNetworkIdle

• cookie