Webpage Screenshot

📸 一键生成网页全页截图

基于 Playwright 的网页全页截图工具,支持本地保存 PNG 文件,适合网页留档与可视化备份。

收藏
10.4k
安装
2.5k
版本
1.0.0
CLS 安全性认证2026-05-09
点击查看完整报告 >

使用说明

核心用法

webpage-screenshot 提供两种截图方式:

推荐方式:运行项目内置 TypeScript 脚本,通过命令行生成 PNG 文件:

npm run screenshot -- <URL> [输出路径]
  • 默认输出 screenshot.png,支持自定义路径
  • 前置依赖:npm install + npx playwright install chromium

替代方式:使用 MCP 浏览器的 browser_navigate + browser_snapshot 组合,适合对话内快速查看而不保存文件。

显著优点

  • 整页捕获:自动滚动截取完整网页(非仅首屏)
  • 标准化输出:1280px 视口宽度,PNG 格式通用兼容
  • 本地化存储:文件直接落盘,便于后续处理与归档

潜在局限

  • 依赖 Node.js 环境及 Playwright 浏览器安装,非零配置
  • 纯静态截图,不支持交互后状态捕获
  • 未提及反爬虫/验证码/动态渲染(如 SPA 懒加载)的处理能力

适合人群

前端开发者、测试工程师、内容运营人员——需批量网页存档、竞品监控或设计验收场景。

常规风险

  • 截图可能包含敏感页面内容,需妥善管理本地文件
  • 高频抓取需遵守目标网站的 robots.txt 及使用条款

安全解读

核心用法

webpage-screenshot 是一个轻量级网页截图工具,提供两种使用方式:

方式一:保存为文件(推荐)
在项目根目录执行命令即可生成 PNG 截图:

npm run screenshot -- <URL> [输出路径]
  • 默认输出 screenshot.png,支持自定义路径
  • 截取整页内容(含滚动区域),视口宽度 1280px

方式二:MCP 浏览器查看
适合仅需快速预览而不保存文件的场景:

1. browser_navigate 打开目标 URL

2. browser_snapshot 获取页面快照

显著优点

| 优点 | 说明 |
|------|------|
| 零代码风险 | 纯 Markdown 文档型 Skill,无可执行代码,功能通过调用外部项目脚本实现 |
| 整页截图 | 自动捕获完整页面,包括滚动区域,优于普通浏览器截图 |
| 灵活输出 | 支持自定义保存路径,方便集成到工作流 |
| 双模式设计 | 文件保存 vs 实时预览,满足不同场景需求 |
| 隐私友好 | 无用户数据收集行为,符合 GDPR/CCPA 基本要求 |

潜在缺点与局限性

1. 外部依赖较重:需安装 Playwright 和 Chromium,首次配置约需数百 MB 下载
2. T3 来源可信度:发布者为个人开发者账号,非知名组织或开源基金会

3. 无内置安全审查:用户需自行验证项目脚本 npm run screenshot 的实际执行内容

4. 网络环境依赖:Chromium 下载依赖外部网络,存在中间人攻击风险(需使用官方镜像)

5. 静态视口:默认 1280px 宽度,未提供移动端视口选项

适合人群

  • 需要定期保存网页快照的内容运营者、研究员
  • 需要将网页可视化纳入报告的设计师、产品经理
  • 希望快速留档网页状态的技术文档撰写者
  • 对截图工具有基础技术能力、能审查脚本安全性的用户

常规风险

| 风险类型 | 等级 | 说明 |
|----------|------|------|
| 供应链攻击 | 中 | 依赖 npm 包和 Chromium 二进制文件,需验证来源 |
| 脚本注入 | 低 | Skill 本身无代码,但项目脚本需人工审查 |
| 数据泄露 | 极低 | 无数据上传行为,截图仅保存至本地 |
| 来源可信度 | 中 | T3 级别来源,建议审查后使用 |

使用建议

1. 首次使用前审查项目内截图脚本的源代码
2. 执行 npm audit 检查依赖安全性

3. 使用官方 npm 镜像,避免 Chromium 下载被篡改

4. 敏感网页优先使用 MCP 浏览器方式,减少本地存储

5. 定期更新 Playwright 和 Chromium 以获取安全补丁

Webpage Screenshot 内容

手动下载zip · 1.1 kB
SKILL.mdtext/markdown
请选择文件