谷歌插件学习之某设计网站非会员去水印下载图片
一、免责声明:此博客只用来进行技术交流,如有不当之处,请联系我删除!
二、谷歌插件学习网址
官方文档:
中文文档:
三、目标网址去水印及非会员下载原理分析
- 目标网址:https://www.gaoding.com/
- 随便点开一张海报https://www.gaoding.com/design?id=33995430&simple=1&topic_id=10317
可以看到该网站下载图片需要注册会员,且图片上带有水印。 - F12打开控制台进行分析,发现水印是使用svg印上去的,所以我们只需要阻塞这个请求地址就可以实现去水印(谷歌插件提供了两个权限实现阻塞web请求)
// manifest.json文件
// 权限申请
"permissions":
[
"webRequest", // web请求
"webRequestBlocking",
"http://*/*", // 可以通过executeScript或者insertCSS访问的网站
"https://*/*" // 可以通过executeScript或者insertCSS访问的网站
],
对着这个地址右键,选择阻塞该请求URL,清除缓存(重要),刷新该页面,发现水印已经被去除了
4. 下载的原理就是使用html2canvas,将DOM结构转化为image数据,然后使用a标签的download属性进行下载
5. 如果是非会员,页面会有一个移除水印的按钮,去除的原理是在页面加载完成后,使用DOM的remove方法删除这个元素。
四、效果如下
五、插件下载方式
CSDN(0积分):https://download.csdn.net/download/qq_16687863/15436390
Github:https://github.com/1061750360/chrome-plugins.git