2025-03-19发表Tech / FrontEnd6 分钟读完 (大约884个字) 次访问

用多模态模型，写新一代爬虫

字节有一个很实用但不怎么火的项目，叫 Midscene.js，Chrome 商店上的安装数仅有 1 万，它是一个由多模态模型驱动的前端自动化测试插件。自动化测试我平常很少用到，但我发现它特别适合用来写爬虫……

Midscene.js 一共就三大 API：Action、Query、Assert

Action 交互

描述步骤并执行交互。例如，在 GitHub 上交互：查找 GitHub 上的 Twikoo 项目，点进详情页，点个 Star——

Query 提取

从 UI 中“理解”并提取数据，返回值是 JSON 格式，想要什么数据结构，它都可以给你。例如，在面试题宝典网站上提取：string[]，所有面试题目——

Assert 断言

判断是否符合指定条件。例如，在智能家庭页面断言：电脑是关着的——

大模型支持情况

项目最初仅支持 GPT-4o 模型，跑一行用例的成本在 ¥0.1 左右，还挺贵的，后来支持了 Qwen-2.5-VL 和 UI-TARS，成本就大幅降低了。以下就以千问模型为例，带领大家上手这个神奇的插件。

安装

可以直接从 Chrome 商店安装：
https://chromewebstore.google.com/detail/midscene/gbldofcpkknbggpkmbdaefngejllnief

配置

从浏览器右上角的插件菜单中打开 Midscene.js 的侧边栏，会提示 No config，点击按钮会弹出 Env Config 的设置框，在里面配置以下变量

OPENAI_BASE_URL="https://dashscope.aliyuncs.com/compatible-mode/v1"
OPENAI_API_KEY="sk-xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx"
MIDSCENE_MODEL_NAME="qwen-vl-max-latest"
MIDSCENE_USE_QWEN_VL=1

其中的 OPENAI_API_KEY 需要你自己申请，申请的地址是：
https://bailian.console.aliyun.com/?apiKey=1#/api-key

以上链接不包含推广，如果你是首次开通阿里云百炼，新用户是有免费额度的，请注意额度的有效期，避免浪费~

测试

接下来用自然语言随便写一条指令，点击 Run 按钮，见证 AI 开始接管你的浏览器……

代码集成

接下来我们尝试编写爬虫，组合这三大 API，完成复杂的自动化任务。

建一个新的 Node.js 项目，安装所需的依赖——

1	pnpm install @midscene/web tsx --save-dev

编写脚本 main.ts，执行你想要进行的操作，例如，打开必应，输入 iMaeGoo 点击搜索，并输出搜索结果——

main.ts

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

function sleep(ms: number) {
  return new Promise((r) => setTimeout(r, ms));
}

async function main() {
  process.env.OPENAI_BASE_URL =
    "https://dashscope.aliyuncs.com/compatible-mode/v1";
  process.env.OPENAI_API_KEY = "sk-xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx";
  process.env.MIDSCENE_MODEL_NAME = "qwen-vl-max-latest";
  process.env.MIDSCENE_USE_QWEN_VL = 1;
  const agent = new AgentOverChromeBridge();
  // 这个方法将连接到你的桌面 Chrome 的新标签页
  // 记得启动你的 Chrome 插件，并点击 'allow connection' 按钮。否则你会得到一个 timeout 错误
  await agent.connectNewTabWithUrl("https://www.bing.com");
  // 这些方法与普通 Midscene agent 相同
  await agent.ai("输入 iMaeGoo 点击搜索");
  const result = await agent.aiQuery(
    "{title: string, url: string}[], 搜索结果"
  );
  console.log("搜索结果", result);
  await sleep(3000);
  await agent.destroy();
}

main();