Full Page Screenshot 网页长截图技能
零依赖直连 Chrome DevTools 协议，把任意网页（含 SPA、懒加载、超长页面）截成一张完整 PNG 长图。
技能仅使用 Node 内置模块，直连本机 Chrome DevTools 端口，无外部依赖、无网络上传迹象；输出默认写入 /tmp，--url 模式自动关闭后台 tab，会临时修改页面样式并声明恢复。扣分点：需要用户开启 Chrome 远程调试端口，这本身扩大了本机攻击面但 SKILL.md 未讨论该风险与回收方式；无回滚说明；发布者身份未验证。
SKILL.md 与 README 工作流程一致（--check/--list/--url/targetId），前置检查、超时参数、失败降级（proxy 回退、无 Pillow 保留分片）均有描述，happy path 可信。扣分点：本次仅审阅文档，脚本源码未在证据中呈现，异常输入行为、错误信息质量与关键路径复现无法静态确认，按静态上限不高于 10。
触发场景（截长图/全页截图/long screenshot，中英文均有）、两种使用模式、参数边界（宽度、DPR、超时）、非适用范围（需登录的后台 tab 认证失败场景、超长页高 DPR 内存问题）披露清晰，本地 Chrome 方案对中国大陆网络无障碍。扣分点：触发条件主要靠语义描述，边界仍依赖执行验证。
文档结构良好，含前置条件、参数表、工作原理图、注意事项、安装说明，README 声明 MIT 许可。扣分点：SKILL.md 文件本身无许可证元数据，无版本号/变更日志，维护责任与更新路径不明，proxy 兼容依赖外部 'web-access' 技能属隐含假设。
声称的核心价值（无依赖生成完整长图、SPA/懒加载/超长页处理）相对手动截图有明确边际价值，输出为直接可用的 PNG。扣分点：静态审阅无法验证输出质量，代表性结果无已提交的测试或产物佐证，超出 16000px 拼接依赖可选的 Pillow。
有可审计的一手材料（SKILL.md、README、安装/使用命令），README 声明仅用 Node 内置模块可对照脚本核实。扣分点：无 CI、无测试套件、无第三方执行证据，性能与能力主张（SPA 稳定等待、分片拼接）不可独立复现，静态上限 5 以内。
- 本次为纯静态文档审阅，未执行任何脚本，所有能力主张未经复现验证。
- 使用需开启 Chrome 远程调试，会使本机调试端口暴露，建议仅在受信任环境中使用并在用后关闭该选项。
- SKILL.md 自身无许可证元数据，且无版本号/变更日志，更新与维护责任不明。
- 超过 16000px 页面的拼接依赖可选的 Python Pillow，未安装时仅保留分片文件，需手动处理。
- 对需要登录的内部系统，--url 模式的后台 tab 可能无法完成认证，应改用 targetId 模式。
这个 Skill 能做什么，适合哪些场景？
这是一个 Claude Code 技能，用于对网页做完整长截图，输出一张覆盖全部可滚动内容的 PNG。它不依赖 Puppeteer 或 Playwright，而是通过读取 DevToolsActivePort 文件发现调试端口，直连 Chrome DevTools WebSocket 完成所有操作。技能支持两种模式：对用户已打开的 tab 按 targetId 截图，或传入 URL 自动开后台 tab、截完自动关闭。针对 SPA 内部滚动容器、懒加载图片和超过 16000px 的超长页面都有专门处理，超长页面会分片截取后用 Python PIL 拼接。
脚本通过 DevToolsActivePort 文件发现 Chrome 调试端口并建立 WebSocket 连接；用 Emulation.setDeviceMetricsOverride 设置视口，等待 readyState=complete 后持续监测 DOM 元素数量直到渲染稳定；自动检测 overflow-y 为 auto/scroll 的容器并用 !important 覆盖 CSS 高度约束展开内容；逐步滚动触发 IntersectionObserver 懒加载并等待所有 img.complete；超过 16000px 的页面按 8000px 分片截取、用 PIL 拼接；最终调用 Page.captureScreenshot 保存 PNG。若 web-access 的 CDP Proxy 正在运行，会先尝试直连，超时后降级到 proxy API。
- 需要把技术文章、报告或文档存成一张完整图片留档的用户
- 调试或评审自己开发的 SPA 页面，希望看到展开内部滚动容器后的完整渲染效果的前端工程师
- 需要截图 SAP、企业 SSO 等需要登录的内部系统页面，且已在 Chrome 中手动登录的用户
- 需要把超过 16000px 的超长页面（如长表格、聊天记录）截成单张图的场景
- 想要 Retina 清晰度截图、可调视口宽度和设备像素比的用户
这个 Skill 有哪些优点和局限？
- 零 npm 依赖，只用 Node.js 内置模块，无需安装 Puppeteer/Playwright
- 对 SPA 场景处理完善：滚动容器展开、DOM 稳定等待、懒加载触发均有自动化逻辑
- 超过 16000px 的超长页面自动分片截取并拼接
- 提供 --list/--check/--url 等子命令，可脱离 Claude Code 独立作为 CLI 使用
- 与 web-access 的 CDP Proxy 兼容，直连失败可自动降级
- 依赖 Chrome 开启远程调试，前置配置对普通用户有一定门槛
- 超长页面（>20000px）在高 DPR 下可能导致 Chrome 内存问题，需手动降低 --dpr
- --url 模式创建后台 tab，无法完成需要登录的页面认证，必须改用 targetId 模式
- 分片拼接需要 Python 3 + Pillow（macOS 通常已装，其他平台需自行确认）
- 截图期间会临时修改页面视口和滚动容器样式（完成后恢复）
- 仓库未见测试套件说明，License 在源数据中标注为 unknown（README 写 MIT）
如何安装这个 Skill？
方式一：npx skills add LewisLiu007/full-page-screenshot。方式二：git clone https://github.com/LewisLiu007/full-page-screenshot.git ~/.claude/skills/full-page-screenshot。随后需在 Chrome 中打开 chrome://inspect/#remote-debugging 并勾选 "Allow remote debugging for this browser instance"。可运行 node "${CLAUDE_SKILL_DIR}/scripts/full-page-screenshot.mjs" --check 检查前置条件。仓库未提供 Windows 等其他平台的额外安装说明。
如何使用这个 Skill？
在 Claude Code 中直接说："Take a full-page screenshot of https://example.com" 或 "截个长图"，检测到截图意图后技能会自动触发。也可独立以 CLI 运行：node scripts/full-page-screenshot.mjs --list 列出已开 tab；node scripts/full-page-screenshot.mjs --url "https://example.com" output.png 对 URL 一键截图；node scripts/full-page-screenshot.mjs <targetId> output.png 对已有 tab 截图。可选参数：--width（默认 1200，宽表格建议 1440-1920）、--dpr（2 为 Retina 清晰度但体积翻 4 倍）、--wait（仅 --url 模式，默认 15000ms）。截完可用 sips -g pixelWidth -g pixelHeight <output> 验证尺寸。
这个 Skill 与同类方案有什么区别？
README 明确以 Puppeteer / Playwright 为对照：本项目不依赖这些 npm 库，直接用 Node.js 内置模块连 Chrome DevTools 协议，省去 npm install，但功能面也窄于完整的浏览器自动化框架——只做截图这一件事。