SuperAPI AI 工具集

full-page-screenshot

通用与其它

查看项目

更新于 10-15 16:47

技能介绍

用途:当用户要求对网页做整页截图、长截图或完整页面捕获时使用,生成包含全部滚动内容的单张 PNG。

主要能力:

  • 通过 CDP 连接 Chrome,截取已打开标签页或指定 URL。
  • SPA 滚动容器展开:检测 overflow-y: auto/scroll 容器,滚动触发懒加载后移除溢出约束,使内容一次性完整渲染。
  • DOM 稳定性检测:在 readyState=complete 后监控元素数量直至稳定,适配 SPA 动态渲染。
  • 懒加载触发:增量滚动触发 IntersectionObserver,并等待所有 img 加载完成。
  • 超长页面分块截取:超过 16000px 的页面按 8000px 分块,自动用 Python PIL 拼接;PIL 不可用时分别保存分块。
  • 自动发现 Chrome 调试端口(DevToolsActivePort,回退探测 9222/9229/9333),并在 CDP 代理占用连接时回退到代理 API。

使用方式: 前置条件为 Node.js 22+ 与启用远程调试的 Chrome。先检查环境: node "${SKILL_DIR}/scripts/full-page-screenshot.mjs" --check 若 Chrome 检查失败,需在 chrome://inspect/#remote-debugging 开启远程调试。 方式一(推荐用于需登录页面):先列出标签页 node "${SKILL_DIR}/scripts/full-page-screenshot.mjs" --list,再按 targetId 捕获:node "${SKILL_DIR}/scripts/full-page-screenshot.mjs" <targetId> /tmp/screenshot.png --width 1200 --dpr 1。 方式二:传入 URL,后台打开标签页、截图后关闭:node "${SKILL_DIR}/scripts/full-page-screenshot.mjs" --url "https://example.com" /tmp/screenshot.png --width 1200 --dpr 1 --wait 15000。 参数包括输出路径、--width(文章 1200,仪表盘 1440-1920)、--dpr(默认 1)、--wait(仅 URL 模式,默认 15000)、--css 注入自定义样式。

适用场景:文章、仪表盘等长页面整页留档;已登录页面截图优先用方式一。

限制:无法可靠用于需 SSO 登录的 URL 直截;超 10000px 的页面建议 --dpr 1 以免 Chrome 内存问题;--wait 不宜低于 5000;拼图依赖 Python Pillow。输出可用 sips 或 file 验证尺寸。