Chrome MV3 扩展精准捕获 DOM 元素

在传统截图工具中，截图总是先抓取视口再裁剪，导致捕获的不是目标元素本身。Snaptura 通过四大技术解决这一痛点：

1. 按设备像素捕获
captureVisibleTab() 返回的位图已包含 devicePixelRatio，直接按 CSS 维度裁剪会产生模糊或尺寸错误。Snaptura 在裁剪前将矩形乘以 DPR，并记录 DPR，保证导出图像 1:1 清晰。

2. 智能悬停选择
通过向上遍历节点并按可见面积与语义权重评分，选择最符合用户意图的祖先元素（如卡片、按钮），并在页面层级绘制不影响原页面的高亮。

3. 全页捕获与粘性元素处理
在滚动拼接时先检测 position: sticky/fixed 元素，按滚动位置隐藏或固定正确版本，使用 scrollTo({top, behavior:'instant'}) 与 requestAnimationFrame 确保无缝拼接。

4. 像素前的 DOM 级隐私遮蔽
通过在 DOM 中插入占位元素并隐藏原节点，捕获前完成遮蔽，避免敏感文本被渲染到 PNG 或撤销栈中。

此外，Snaptura 采用 MV3 的 Service Worker 与 OffscreenDocument 组合，保持后台轻量，支持 GIF 与视频编码。免费版无水印，Pro 版提供高级功能。

GitHub: GitHub

#开发者 #工具 #ChromeExtension #MV3 #DOMCapture #隐私保护 #全页截图 #滚动拼接
@DevToolboxHub