- ❌ 想截取聊天记录，但市面上的截图工具只能截取可见部分
- ❌ 想保存完整的评论列表，但滚动条里的内容截不到
- ❌ 需要截取代码编辑器窗口，但页面中的滚动区域无法完整捕获
- ❌ 尝试了各种工具和插件，都无法解决"滚动容器"的截图问题
核心痛点：传统截图工具只能截取整个网页或当前可见区域，但对于页面内部的滚动容器（如聊天窗口、评论框、代码编辑器）却束手无策。
ScrollSnap 是专门为解决这个问题而生的工具，它能：
- ✅ 智能识别页面中的滚动区域
- ✅ 自动展开完整的滚动内容
- ✅ 完整截取所有被隐藏的内容
- ✅ 一键保存高质量图片
不仅如此，还提供了 3 种额外的截图模式，满足日常的所有截图需求。
ScrollSnap 是一个功能强大的 Chrome 扩展，专注于解决网页滚动区域截图难题。
| 功能 | 说明 | 独特优势 |
|---|---|---|
| 🎯 滚动区域截图 | 智能识别并完整截取页面内的滚动容器 | ⭐ 核心功能 |
| 📄 完整页面截图 | 自动滚动截取整个网页 | 支持超长页面 |
| ⚡ 可见区域截图 | 快速截取当前屏幕 | 1秒完成 |
| ✂️ 手动选择截图 | 拖拽选择任意区域 | 精确控制 |
- 🔬 智能识别算法 - 自动检测可滚动元素
- 🎨 html2canvas 渲染 - 完整保留样式和布局
- 🚀 零配置使用 - 开箱即用
- 🌍 中英文界面 - 自动语言切换
- 📦 多种格式 - PNG/JPEG 可选
问题：聊天记录很长，只能看到当前屏幕的几条消息
解决：使用"滚动区域截图"，一键截取完整对话历史
结果：完整保存所有聊天内容，包括图片和表情
问题：评论列表有滚动条，传统截图只能截取可见的几条
解决：自动识别评论列表滚动区域，完整截取所有评论
结果：保存完整的讨论内容，方便分享和存档
问题：LeetCode、CodePen 等网站的代码窗口有滚动条
解决：识别代码编辑器区域，完整截取所有代码
结果：清晰展示完整代码，用于分享或文档
问题：淘宝、京东商品详情页很长，需要多次截图拼接
解决：使用"完整页面截图"，自动滚动并拼接
结果：一张完整的商品详情图，方便对比和分享
| 模式 | 速度 | 难度 | 最佳场景 | 核心优势 |
|---|---|---|---|---|
| 滚动区域 ⭐ | ⚡⚡⚡ | 简单 | 聊天窗口、评论列表 | 智能识别滚动容器 |
| 完整页面 | ⚡⚡⚡ | 简单 | 商品详情、文章 | 自动处理超长页面 |
| 可见区域 | ⚡⚡⚡⚡⚡ | 简单 | 快速截图 | 1秒完成 |
| 手动选择 | ⚡⚡⚡⚡ | 简单 | 精确控制 | 像QQ截图一样 |
- ✅ 多种格式：PNG（高质量）、JPEG（小文件）
- ✅ 质量可调：1-100% 精确控制
- ✅ 智能处理：自动识别固定元素、处理超长页面
- ✅ 实时反馈：进度显示、详细错误提示
- ✅ 零配置：安装即用，无需设置
-
克隆代码：
git clone https://github.com/Pa55w0rd/ScrollSnap.git cd ScrollSnap -
加载扩展：
- 打开 Chrome 浏览器
- 访问
chrome://extensions/ - 开启右上角的"开发者模式"
- 点击"加载已解压的扩展程序"
- 选择项目文件夹
-
完成！工具栏会出现扩展图标。
- 点击扩展图标 - 打开弹出窗口
- 选择截图模式 - 根据需求选择
- 调整参数（可选）- 格式和质量
- 开始截图 - 点击按钮
适用场景：
- ✅ 商品详情页
- ✅ 新闻文章
- ✅ 长文档
- ✅ 任何需要滚动的页面
使用方法：
扩展图标 → 完整页面 → 开始截图
特点：
- 自动滚动整个页面
- 智能处理固定元素（导航栏等）
- 超长页面自动分段保存
适用场景：
- ✅ 快速截图
- ✅ 弹出窗口
- ✅ 当前视图
- ✅ 不需要滚动的内容
使用方法：
扩展图标 → 当前可见页面 → 开始截图
特点：
- 最快速（1-2秒）
- 只截取当前屏幕
- 不需要滚动
适用场景：
- ✅ 只需要部分内容
- ✅ 排除广告和侧边栏
- ✅ 截取特定图片或段落
- ✅ 制作教程图片
使用方法：
扩展图标 → 手动选择区域 → 开始截图
→ 按住鼠标左键拖拽 → 松开完成
特点：
- 拖拽选择范围
- 实时显示尺寸（如：640 × 480 px）
- 蓝色选区框 + 半透明遮罩
适用场景：
- ✅ 聊天窗口
- ✅ 评论列表
- ✅ 代码编辑器窗口
- ✅ 嵌入的滚动框
使用方法：
扩展图标 → 滚动区域 → 开始截图
→ 移动鼠标到可滚动区域 → 点击蓝色高亮区域
特点：
- 自动识别可滚动元素
- 蓝色边框高亮
- 完整截取滚动内容
| 格式 | 特点 | 适用场景 |
|---|---|---|
| PNG | 无损压缩，质量高 | 重要文档、需要清晰度 |
| JPEG | 有损压缩，文件小 | 长页面、快速分享 |
- 90-100%：最高质量，文件较大
- 70-89%：平衡质量和大小
- 50-69%：快速分享，文件较小
A： 根据需求选择：
- 整个网页 → 完整页面
- 快速截图 → 当前可见页面
- 部分内容 → 手动选择区域
- 聊天窗口 → 滚动区域
A： 页面中没有可滚动的局部区域。建议改用"完整页面"模式。
A： 不能。只能截取当前可见部分。需要完整内容请使用"完整页面"。
A： 浏览器的默认下载文件夹。文件名格式：webpage_日期_时间_模式.格式
A： 多次使用"手动选择区域"模式，或使用"完整页面"后用图片编辑器裁剪。
- Manifest V3 - 最新的扩展架构
- Service Worker - 后台处理
- Chrome Extension APIs - tabs, downloads, storage
- html2canvas - 滚动区域渲染
- Shadow DOM - 样式隔离
- Canvas API - 图片处理
.
├── manifest.json # 扩展配置
├── src/
│ ├── background.js # 后台服务
│ ├── content.js # 内容脚本（核心逻辑）
│ ├── popup/
│ │ ├── popup.html # 弹出窗口
│ │ ├── popup.js # 弹出窗口逻辑
│ │ └── popup.css # 样式
│ └── lib/
│ └── html2canvas.min.js # 第三方库
├── _locales/ # 多语言支持
│ ├── en/
│ │ └── messages.json # 英文
│ └── zh_CN/
│ └── messages.json # 中文
└── assets/
└── icons/ # 扩展图标
✨ 新功能：
- 新增：当前可见页面截图
- 新增：手动选择区域截图
🐛 Bug 修复：
- 修复：滚动区域点击遮罩层问题
- 修复：错误提示不清晰
🎨 优化：
- 优化：更友好的提示信息
- 优化：详细的调试日志
🎉 初始版本：
- 完整页面截图
- 滚动区域截图
- PNG/JPEG 格式支持
欢迎贡献代码和提出建议！
通过 GitHub Issues 报告 Bug
在 Issues 中提出新功能建议
- Fork 本仓库
- 创建特性分支 (
git checkout -b feature/AmazingFeature) - 提交更改 (
git commit -m 'Add some AmazingFeature') - 推送到分支 (
git push origin feature/AmazingFeature) - 创建 Pull Request
本项目采用 MIT 许可证 - 查看 LICENSE 文件了解详情
- GitHub: @Pa55w0rd
- Issues: 项目 Issues 页面
如果这个项目对你有帮助，请给它一个 ⭐
立即体验四种强大的截图模式！ 🎉
Made with ❤️ by [Your Name]