网页内容选择截图

基于SnapDOM插件实现的网页内容选取截图脚本

作者
zymbth
日安装量
0
总安装量
4
评分
1 0 0
版本
0.0.15
创建于
2025-07-14
更新于
2025-09-10
大小
7.0 KB
许可证
MIT
适用于
所有网站

网页DOM捕获截图

介绍

使用SnapDOM实现的网页DOM捕获截图脚本,仓库地址

@zumer/snapdom: SnapDOM captures HTML elements to images with exceptional speed and accuracy, supporting pseudo-elements, shadow DOM, web fonts, and more.

本脚本功能只有一个,点击菜单/快捷键开启选择页面元素功能,再次点击即可将该元素内容下载为图片。

为了避免污染页面,本脚本不会在页面中插入任何元素。事件监听仅在开启时添加,完成/关闭后移除。

使用说明

开启功能

开启后可在网页上选择DOM元素,再次点击即可下载其内容

  • 点击油猴脚本,再点击本脚本菜单
  • 网页中鼠标右键也可以在油猴脚本的二级菜单中找到本脚本
  • 快捷键开启:Ctrl+Shift+,

关闭功能

取消进行中的选取并关闭功能

  • Esc
  • 快捷键关闭:Ctrl+Shift+,

演示

演示

问题

  • 耗时

不同于普通截图,@zumer/snapdom 需要解析网页上的DOM元素及样式,内容越复杂耗时越长。

  • 背景色

默认背景色为白色(#fff),当实际背景色源于目标元素的上级元素时,下载后背景色会缺失。

例如:网页body上设置了黑色背景色,选择段落元素下载后,发现背景色变成白色。

本脚本中补充了一个递归获取目标元素“实际”背景色的功能。

  • 元素样式缓存

@zumer/snapdom 插件内部缓存了已捕获元素的样式。后续截取包含已缓存元素时,可能会导致样式不对(如:主题更换、明暗模式更换等原因导致的样式更新)。

  • 图片

直接选择图片时,可能会因跨域问题导致下载失败

  • 事件监听拦截

本脚本的事件监听绑定在document.body上,某些网页内容拦截了事件监听、阻止了事件冒泡,导致无法下载

  • 解析异常BUG

亲测(v1.9.7),偶尔会出现一直在解析或解析失败的情况,未提供中断解析的方法

TODO List

  • [x] 快捷键启动
  • [x] 修复背景色丢失bug
  • [ ] 超时中断解析

反馈

欢迎反馈,或者提交PR。