谷歌插件学习之某设计网站非会员去水印下载图片

一、免责声明：此博客只用来进行技术交流，如有不当之处，请联系我删除！

二、谷歌插件学习网址

官方文档:

• https://dev.crxhome.org/guide/what-is-extensions.html#%E4%BB%80%E4%B9%88%E6%98%AF%E6%89%A9%E5%B1%95

中文文档：

• http://www.kkh86.com/it/chrome-extension-doc/extensions/webRequest.html
• http://chrome.cenchy.com/

三、目标网址去水印及非会员下载原理分析

1. 目标网址：https://www.gaoding.com/
2. 随便点开一张海报https://www.gaoding.com/design?id=33995430&simple=1&topic_id=10317
   
   可以看到该网站下载图片需要注册会员，且图片上带有水印。
3. 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

六、觉得有收获的请点个赞👍吧