NodeShot

About

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文件