用途:当用户要求对网页做整页截图、长截图或完整页面捕获时使用,生成包含全部滚动内容的单张 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 验证尺寸。