DomShot - 专业级网页元素截图工具

DomShot 是一款专为开发者、设计师和内容创作者打造的浏览器插件。它能够让你像使用 Chrome DevTools 一样精准选择网页元素，并一键将其导出为高清图片或无损矢量图形。

🌟 核心特性

• 精准元素锁定：鼠标悬停自动高亮，配合层级漫游功能。
• 层级漫游 (Hierarchy Navigation)：
  • 按 ↑ 键：向上跳转并选中当前元素的父容器。
  • 按 ↓ 键：向下跳转并选中当前元素的第一个子元素。
• 无损矢量导出 (SVG)：通过 foreignObject 技术，将 HTML/CSS 完美封装进 SVG 格式，实现无限放大不模糊。
• 超高清渲染 (HD)：支持最高 4 倍像素比导出，生成适合印刷和视网膜屏幕的高像素图片。
• 快捷工作流：
  • 直接保存：一键下载到本地。
  • 剪贴板集成：直接将高清截图复制到剪贴板，省去保存步骤（仅限图片格式）。
• 中断支持：随时按 Esc 键退出选择状态，不干扰网页正常使用。
• 样式还原：支持透明背景切换，完美保持原始 HTML 渲染出的视觉效果。
• 配置持久化：自动记忆你上次选择的导出格式、缩放倍数、背景透明度等选项，无需重复配置。

🚀 快速开始

1. 安装插件：

   • 在 Chrome 地址栏输入 chrome://extensions/。
   • 开启右上角的 “开发者模式”。
   • 点击 “加载已解压的扩展程序”，选择本项目的根目录。

2. 使用步骤：

   • 在任意网页点击插件图标。
   • 选择你需要的格式（SVG/PNG/JPG）和清晰度（插件会自动记住你的选择）。
   • 点击 “选择网页元素” 按钮。
   • 移动鼠标找到目标元素（支持悬停高亮），使用 ↑ / ↓ 键微调范围，单击左键确认，等待几秒即刻完成。
   • 如需中途退出，随时按下 Esc 键即可。

🛠️ 技术选型

• Chrome Extension Manifest V3：遵循最新的浏览器插件标准。
• html-to-image：底层核心库，负责将复杂的 DOM 树转换为各类图像格式。
• Vanilla JavaScript：零框架依赖，保持极轻量化。

⚠️ 注意事项

• 由于浏览器跨域安全限制，部分受保护的外部图片或第三方 Iframe 可能会在截图中显示为空白。
• 不支持截图复杂的 WebGL 画布内容。