NodeShot

精确截取网页中特定DOM元素的Chrome扩展插件

NodeShot 简洁高效的Chrome扩展，精确截取网页DOM元素。 功能特点 精确选择：鼠标悬停实时高亮目标元素 高质量截图：生成清晰的PNG格式图片 即时下载：截图完成后自动保存到本地 简单易用：一键激活，点击截图 安装方法 打开Chrome浏览器，进入 chrome://extensions/ 开启"开发者模式" 点击"加载已解压的扩展程序" 选择NodeShot项目文件夹 使用方法 点击浏览器工具栏中的NodeShot图标激活截图模式 将鼠标移动到要截图的元素上（元素会高亮显示） 点击高亮的元素进行截图 图片将自动下载到Downloads文件夹 设置选项 右键点击扩展图标选择"选项"可以调整： 图片质量：10-100的质量滑块调节 文件名前缀：自定义截图文件前缀 下载路径：Windows和Mac系统默认保存到Downloads文件夹 技术实现 Chrome Extension API + Canvas API 智能元素检测和边界识别 设备像素比适配，支持高分辨率显示器 精确裁剪算法，确保截图质量 📁 项目结构 NodeShot/ ├── manifest.json # 插件配置文件 ├── background.js # 后台脚本 ├── content.js # 内容脚本 ├── content.css # 内容样式 ├── popup.html # 弹出页面 ├── popup.js # 弹出页面脚本 ├── options.html # 设置页面 ├── options.js # 设置页面脚本 ├── icons/ # 图标文件夹 │ ├── icon16.png # 16x16 图标 │ ├── icon32.png # 32x32 图标 │ ├── icon48.png # 48x48 图标 │ └── icon128.png # 128x128 图标 └── README.md # 说明文档 🔧 技术实现 核心技术 Manifest V3: 使用最新的Chrome扩展API Canvas API: 用于截图生成和处理 Chrome Storage API: 保存用户设置 Chrome Downloads API: 处理文件下载 DOM API: 元素选择和边界计算 主要功能模块 元素检测 (content.js) 鼠标事件监听 元素边界计算 实时高亮显示 截图生成 (background.js) 页面截图捕获 元素区域裁剪 图片格式转换 文件下载 (background.js) 自动文件命名 下载路径管理 下载历史记录 用户界面 (popup.js, options.js) 插件状态管理 设置配置界面 用户反馈提示 🎨 界面设计 现代化UI: 采用渐变色彩和圆角设计 响应式布局: 适配不同屏幕尺寸 无障碍支持: 支持键盘导航和屏幕阅读器 暗色模式: 自动适配系统主题 🔒 权限说明 插件需要以下权限： activeTab: 访问当前活动标签页 downloads: 下载截图文件 storage: 保存用户设置 scripting: 注入内容脚本 🐛 故障排除 常见问题 插件无法激活 检查是否在支持的网页上（非chrome://页面） 确认插件已正确安装并启用 截图失败 检查浏览器权限设置 确认下载文件夹路径正确 元素选择不准确 尝试刷新页面重新激活 检查页面是否有CSS变换影响 调试方法 打开Chrome开发者工具 查看Console面板的错误信息 检查Network面板的请求状态 使用插件的调试模式 📝 更新日志 v1.0.0 (2025-09-08) 初始版本发布 实现基础截图功能 添加设置页面 🤝 贡献指南 欢迎提交Issue和Pull Request！ Fork本项目 创建功能分支 提交更改 发起Pull Request 📄 许可证 MIT License - 详见LICENSE文件