一个功能强大的Chrome浏览器扩展，可以快速截取网页快照、自动命名保存、统一管理。
v1.5 新增 OCR 功能，支持对截图进行文字识别和提取 新增侧边栏功能，提供更便捷的操作体验
v1.4 增加 notion 配置页面，增加 notion 同步功能（由于 notion 限制文件大小 5MB，大于 5MB 的图片会用压缩算法压缩至 5MB）
在 Notion 中创建一个数据库，包含以下属性（属性名称必须完全一致）：
- Title (标题类型) - 存储截图标题
- URL (网址类型) - 存储原网页链接
- Filename (文本类型) - 存储文件名
- Type (选择类型，选项：普通截图、长截图、区域截图) - 截图类型
- Created (日期类型) - 创建时间
- Thumbnail (文件类型) - 存储缩略图文件
- FilePath (文本类型) - 存储 file:// 文件路径
- FilepathReal (文件类型) - 存储实际截图文件
- ocrText (文本类型) - 存储 OCR 识别的文本内容
- 访问 https://www.notion.so/my-integrations
- 创建新的集成（Integration）
- 复制生成的 API 密钥
- 在数据库页面点击右上角的「...」→「连接到」→ 选择你创建的集成
从数据库页面 URL 中复制 32 位字符串，格式如：
https://www.notion.so/your-workspace/database-id?v=...
其中 database-id 就是你需要的数据库 ID
- 在插件弹窗中点击「设置」按钮
- 输入 Notion API 密钥和数据库 ID
- 保存配置后可点击「立即同步」按钮手动同步历史记录
- 之后每次截图都会自动同步到 Notion 数据库
- 由于 Notion 限制文件大小为 5MB，超过此大小的图片会自动压缩
- 首次同步可能需要较长时间，请耐心等待
- 确保网络连接稳定以保证同步成功
v1.3 增加缩略图，增加时间轴模式
- 📸 普通截图: 快速截取当前可见区域
- 📄 长截图: 智能截取完整页面内容，支持自动滚动拼接
- ✂️ 区域截图: 自由选择截图区域
- 📝 智能命名: 根据页面标题自动生成文件名
- 💾 自动保存: 图片自动保存到下载目录的webSnap文件夹
- 📚 历史记录: 完整的截图历史管理，支持搜索和导出
- ⌨️ 快捷键支持: 支持键盘快捷键快速截图
- 🌙 主题切换: 支持日间/夜间模式切换
- 打开 Chrome 浏览器
- 直接访问：https://chromewebstore.google.com/detail/websnap/lekllokjgmdnidpkhmfbbhoiagkpilfp
- 点击 "添加至 Chrome" 按钮
- 在弹出的确认对话框中点击 "添加扩展程序"
- 安装完成后，插件图标会出现在浏览器工具栏中
适用于开发者进行功能定制和二次开发。
-
克隆或下载项目
git clone [项目地址] cd webSnap -
确保项目文件完整
webSnap/ ├── manifest.json ├── popup.html ├── popup.js ├── background.js ├── history.html ├── history.js ├── jszip.min.js ├── icons/ │ ├── icon16.png │ ├── icon48.png │ └── icon128.png └── README.md
如果图标文件缺失，需要将 icons/icon.svg 转换为PNG格式：
icons/icon16.png(16x16像素)icons/icon48.png(48x48像素)icons/icon128.png(128x128像素)
-
打开Chrome浏览器
-
进入扩展管理页面
- 在地址栏输入：
chrome://extensions/ - 或者点击菜单 → 更多工具 → 扩展程序
- 在地址栏输入：
-
开启开发者模式
- 在页面右上角找到"开发者模式"开关
- 点击开启（开关会变成蓝色）
-
加载扩展程序
- 点击"加载已解压的扩展程序"按钮
- 在弹出的文件选择器中选择你的项目文件夹（webSnap）
- 点击"选择文件夹"
-
验证安装
- 如果安装成功，你会在扩展列表中看到"WebSnap"
- 插件图标会出现在浏览器工具栏中
-
启用文件访问权限
- 在扩展管理页面找到 WebSnap
- 点击"详细信息"
- 开启"允许访问文件网址"选项
-
测试插件功能
- 打开任意网页
- 点击插件图标测试各项功能
- 检查浏览器控制台是否有错误信息
-
修改代码后重新加载
- 在扩展管理页面点击 WebSnap 的"重新加载"按钮
- 刷新测试页面
-
查看调试信息
- 右键点击插件图标 → 检查弹出内容
- 在开发者工具中查看 Console 日志
- 打开任意网页
- 点击浏览器工具栏中的WebSnap图标
- 在弹出的窗口中选择截图类型：
- 📸 截取网页快照: 截取当前可见区域
- 📄 长截图: 智能截取完整页面
- ✂️ 区域截图: 自由选择截图区域
- 📚 历史记录: 查看和管理截图历史
- 等待处理完成，图片将自动保存到下载目录的webSnap文件夹
Ctrl+Shift+7(Mac:Cmd+Shift+7): 普通截图Ctrl+Shift+8(Mac:Cmd+Shift+8): 长截图Ctrl+Shift+9(Mac:Cmd+Shift+9): 区域截图Ctrl+Shift+0(Mac:Cmd+Shift+0): 打开历史记录
Q: 插件安装后没有显示图标？ A: 确保你已经生成了正确尺寸的PNG图标文件，并且文件名与manifest.json中的配置一致。
Q: 点击插件没有反应？ A: 检查浏览器控制台是否有错误信息。确保所有JavaScript文件都正确加载。
Q: 截图功能不工作？ A: 某些网站可能因为安全策略限制截图功能。尝试在不同的网站上测试。
Q: 长截图拼接有问题？ A: 检查是否有固定定位元素干扰，或者页面动态加载内容较多，可以稍等片刻再试。
Q: 图片没有下载？ A: 检查Chrome的下载设置，确保下载目录可写。某些浏览器可能阻止自动下载。
Q: 点击图片查看不了或历史记录中图片无法显示？ A: 需要在插件管理页面为 WebSnap 开启文件访问权限：
- 打开
chrome://extensions/ - 找到 WebSnap 扩展
- 点击"详细信息"
- 开启"允许访问文件网址"选项
- 刷新历史记录页面即可正常查看图片
-
查看扩展错误
- 在
chrome://extensions/页面找到WebSnap - 点击"错误"按钮查看详细错误信息
- 在
-
查看控制台日志
- 右键点击插件图标 → 检查弹出内容
- 在开发者工具中查看Console标签页的错误信息
-
重新加载扩展
- 在扩展管理页面点击WebSnap的"重新加载"按钮
当你修改了插件代码后：
- 在
chrome://extensions/页面找到WebSnap - 点击"重新加载"按钮
- 刷新测试页面
- 在
chrome://extensions/页面找到WebSnap - 点击"移除"按钮
- 确认卸载
- Manifest V3: 使用最新的Chrome扩展API
- 智能长截图: 自动滚动页面并拼接完整内容
- Canvas截图: 使用HTML5 Canvas进行网页截图
- 智能命名: 基于页面标题的智能文件命名算法
- 历史管理: 完整的截图历史记录和搜索功能
webSnap/
├── manifest.json # 扩展配置文件
├── popup.html # 弹出窗口界面
├── popup.js # 弹出窗口逻辑
├── background.js # 后台脚本（截图和下载）
├── history.html # 历史记录页面
├── history.js # 历史记录逻辑
├── jszip.min.js # ZIP压缩库
├── icons/ # 图标文件夹
└── README.md # 说明文档
- 某些网站可能因安全策略限制截图功能
- 图片质量取决于网页的渲染效果
- 长截图功能在无限滚动页面上可能效果不佳
- 所有截图文件保存在下载目录的webSnap文件夹中
- Chrome Extension API
- JSZip (用于导出功能)
activeTab: 访问当前活动标签页downloads: 下载文件到本地storage: 存储扩展数据scripting: 注入脚本进行截图
如果遇到问题，请检查：
- Chrome浏览器版本是否支持Manifest V3
- 文件权限是否正确
- 所有必需文件是否存在
- 重构长截图功能，提升成功率和拼接质量
- 新增区域截图功能
- 新增完整的历史记录管理
- 支持快捷键操作
- 支持主题切换
- 优化文件管理，统一保存到webSnap文件夹
- 初始版本发布
- 实现基本的网页截图功能
- 智能文件命名
- 自动下载保存
MIT License
欢迎提交Issue和Pull Request来改进这个项目！