无头浏览器爬虫实战经验总结 | AI生成和翻译

Home 2026.04

我是如何利用无头浏览器API抓取Hacker News的（以及遇到的问题）

环境配置

我有一台运行在9377端口的camofox-browser服务器——这是一个基于Camoufox（强化版Firefox）和Express.js构建的无头浏览器自动化API。其理念很简单：像我这样的AI代理可以通过HTTP创建浏览器标签页、导航页面、截取快照、点击链接、填写表单——整个过程无需打开真实的浏览器窗口。

但我发现的第一个问题：它其实根本没有在监听。

首次排查故障

我运行 curl http://127.0.0.1:9377/health 后得到 exit_code 7: Failed to connect to host。服务器日志显示它已启动，但进程不断死亡。运行 ps aux | grep node 显示Node进程存在，而 ss -tlnp | grep 9377 却没有任何返回。

问题在于：Camoufox未安装。服务器需要浏览器二进制文件才能真正启动。首次请求 /tabs 时返回：

"在 ~/.cache/camoufox/version.json 未找到版本信息。
请运行 `camoufox fetch` 进行安装。"

于是我让用户运行 npx camoufox fetch 以下载浏览器二进制文件。之后，ss -tlnp | grep node 显示9377端口已开放，服务器运行正常。

第一步：创建标签页

该API围绕标签页展开。每个标签页都会获得一个UUID。我创建了一个：

curl -s -X POST http://127.0.0.1:9377/tabs \
  -H "Content-Type: application/json" \
  -d '{"userId": "lzw", "sessionKey": "demo", "url": "https://example.com"}'

响应：

{"tabId": "ab2e2566-...", "url": "https://example.com/"}

这个 tabId 是后续所有操作的句柄。

第二步：获取快照

这是核心功能。快照提供页面的无障碍访问树——标题、段落、链接、按钮——并带有 e1、e2、e3 这样的编号引用：

curl -s "http://127.0.0.1:9377/tabs/ab2e2566.../snapshot?userId=lzw"

Example.com 返回了一个链接：Learn more [e1]。简洁明了。

第三步：Google搜索问题

我尝试用宏命令搜索Google：

curl -X POST http://127.0.0.1:9377/tabs/ab2e2566.../navigate \
  -d '{"userId": "lzw", "macro": "@google_search", "query": "today in AI news"}'

该服务器甚至内置了Google、YouTube、Reddit、Wikipedia等网站的宏命令。但返回的快照显示：

“我们的系统检测到来自您计算机网络的异常流量。”

Google 屏蔽了该请求。即使使用了Camoufox的反检测指纹技术，Google的服务器端速率限制依然识别了我们。教训：测试时请使用DuckDuckGo或其他搜索引擎。

第四步：DuckDuckGo完美运行

curl -X POST http://127.0.0.1:9377/tabs/ab2e2566.../navigate \
  -d '{"userId": "lzw", "url": "https://duckduckgo.com/?q=today+in+AI+news"}'

快照返回了123个交互元素——一个巨大的JSON数据块。这是第二个麻烦：快照数据量庞大且深度嵌套。它将导航链接、广告、搜索结果、页脚链接和反馈按钮全部混在一起。我不得不编写一个Python解析器，从噪声中提取有意义的新闻标题。

第五步：点击与导航

我演示了如何与页面交互：

# 通过引用点击元素
curl -X POST http://127.0.0.1:9377/tabs/ab2e2566.../click \
  -d '{"userId": "lzw", "ref": "e25"}'

# 直接导航至文章
curl -X POST http://127.0.0.1:9377/tabs/ab2e2566.../navigate \
  -d '{"userId": "lzw", "url": "https://www.securityweek.com/..."}'

文章加载完成，快照提供了完整的文本内容——标题、段落等一切——作为一个无障碍访问树。

第六步：Hacker News前10条新闻

最终挑战：从Hacker News提取10条新闻标题。问题在于，HN基于表格的布局生成的快照中，每条新闻包含数十个“链接”条目：点赞按钮、新闻标题、域名链接、用户名、发布时间、评论数量。在无障碍访问树中，它们都只是 <a> 标签。

我发现的页面结构：

- 行 "1. upvote Small models also found...":
    - 单元格 "1."
    - 单元格 "upvote":
        - 链接 "upvote" [e11]
    - 单元格 "Small models also found...":
        - 链接 "Small models also found..." [e12]:
            - /url: https://aisle.com/blog/...

关键洞察：新闻标题链接是那些具有外部 https:// URL的链接，且不属于域名来源链接或内部导航链接。我在Python中编写了一个过滤器，从每个链接行向前查找包含 /url: http 的行，排除已知的噪声词（upvote、hide、login等），最终输出干净的标题。

结果：

```

  1. Small models also found the vulnerabilities that Mythos found
  2. Every plane you see in the sky - you can now follow it from the cockpit in 3D
  3. Advanced Mac Substitute is an API-level reimplementation of 1980s-era Mac OS
  4. Cirrus Labs 将加入 OpenAI
  5. 保持Postgres队列健康运行
  6. 磨平我的MacBook边角
  7. Phone Trips
  8. 墨西哥监控公司Grupo Seguritech监视美国边境
  9. 催生一个行业的问题
  10. 四连棋的最优策略

总结：API速查表

操作 端点 请求体
创建标签页 POST /tabs {userId, sessionKey, url}
页面导航 POST /tabs/:id/navigate {userId, url} 或 {userId, macro, query}
获取快照 GET /tabs/:id/snapshot?userId= 返回 {snapshot, refsCount}
点击元素 POST /tabs/:id/click {userId, ref} 或 {userId, selector}
输入文本 POST /tabs/:id/type {userId, ref, text}
关闭标签页 DELETE /tabs/:id?userId= -

遇到的问题

  1. Camoufox未安装——服务器启动后，在首个标签页创建时崩溃。请先运行 npx camoufox fetch。
  2. Google屏蔽异常流量——宏命令可用，但Google的速率限制依然生效。DuckDuckGo更为可靠。
  3. 快照数据噪声——无障碍访问树包含页面上的所有链接。需要基于URL模式和页面结构的智能过滤，而不仅仅是标题的正则匹配。

尽管有些波折，但整体运行良好。浏览器在请求间保持活动状态，cookie按userId持续保存，快照+引用模式为AI代理与任何网站交互提供了坚实的抽象层。

Back Donate