[开源] 做了一个面向 AI 代理的 Web 自动化库:双引擎(HTTP + 浏览器)+ 声明式动作,让 AI 像人一样浏览网页

查看 15|回复 1
作者:riceball   
最近一直在折腾 AI Agent ,发现让 Agent 可靠地与 Web 交互是个大难题,现有工具要么太底层,要么不够灵活。所以动手撸了一个轮子: **@isdk/web-fetcher**,想和大家分享一下,也希望能得到一些反馈。
  • GitHub: https://github.com/isdk/web-fetcher.js
  • NPM: npm install @isdk/web-fetcher

    解决了什么痛点?
    你可能会问,为啥不用 fetch 或 Playwright/Crawlee ?
  • fetch 拿不到 JS 动态渲染的内容,对现代网页基本没用。
  • Playwright 虽然强大,但需要写大量命令式的过程代码 (await page.click(...) 等),不仅繁琐,而且 AI (比如 LLM) 很难直接生成这种复杂的逻辑。

    我不想重复造轮子,所以底层用了Crawlee 库来处理。
    我的目标是在 Crawlee 之上构建一个跨引擎一致性:抽象/模拟 HTTP 与 Browser 的共有行为,声明式的“意图层”,让 AI 可以通过生成简单的 JSON 来“指挥”浏览器完成任务,而不是去写具体的执行代码。
    核心功能
  • ⚙️ 双引擎架构: 你可以选择 http 模式(基于 Cheerio )来极速抓取静态内容,也可以用 browser 模式(基于 Playwright )来处理复杂的动态网页。
  • ✨ 统一的操作模型 (核心设计): 这是最关键的一点。我抽象了 http 和 browser 模式下的共性行为。无论底层用哪个引擎,你都使用同一套 actions API 。比如 extract (提取数据) 这个操作,在 http 模式下它会通过 Cheerio 解析静态 HTML ,在 browser 模式下它会操作浏览器渲染后的 DOM 。你只需要学习一套 API ,库在内部完成了适配和翻译
  • 📜 声明式操作脚本: 基于统一的模型,你可以用 JSON 定义一个多步骤任务流(登录、填表、点击),AI 生成这个 JSON 的成本远低于生成 JS 代码。
  • 📊 强大的数据提取: 同样是声明式的 Schema ,轻松从页面提取结构化数据。
  • 🛡️ 内置反爬: browser 模式下开启 antibot: true,能处理一些常见的 Cloudflare 挑战。
  • 🧩 易于扩展: 可以自己封装常用的操作,比如把“登录知乎”封装成一个 loginToZhihu 的自定义动作。

    快速上手:提取个标题
    注意,下面的代码不关心目标 URL 是静态还是动态的,extract 操作在两种模式下都有效。
    import { fetchWeb } from '@isdk/web-fetcher';
    async function getTitle(url: string) {
      const { outputs } = await fetchWeb({
        url,
        actions: [
          {
            id: 'extract',
            params: {
              selector: 'title', // 提取  标签内容
            },
            storeAs: 'pageTitle', // 结果存到 outputs.pageTitle
          },
        ],
      });
      console.log('页面标题:', outputs.pageTitle);
    }
    getTitle('https://www.');
    进阶玩法:多步表单提交 (Google 搜索)
    这个例子展示了如何用 JSON 指挥浏览器执行一系列动作。
    import { fetchWeb } from '@isdk/web-fetcher';
    async function searchGoogle(query: string) {
      const { result } = await fetchWeb({
        url: 'https://www.google.com',
        engine: 'browser', // 显式指定需要浏览器环境
        actions: [
          // 步骤 1: 找到输入框并填入内容
          { id: 'fill', params: { selector: 'textarea[name=q]', value: query } },
          // 步骤 2: 提交表单
          { id: 'submit', params: { selector: 'form' } },
          // 步骤 3: 等待搜索结果容器加载出来
          { id: 'waitFor', params: { selector: '#search' } },
        ]
      });
      console.log('搜索结果页 URL:', result?.finalUrl);
    }
    searchGoogle('V2EX');
    项目状态
    项目刚起步,核心架构已经搭好。下一步计划是实现更智能的抓取策略(比如发现 http 模式拿不到内容时,自动升级到 browser 模式)。
    项目是开源的,欢迎大家试用、Star 、提 Issue ,或者狠狠地拍砖!感谢。

    AI, Web自动化, 双引擎

  • v2zhao   
    有意思 已 star
    您需要登录后才可以回帖 登录 | 立即注册

    返回顶部