【Chrome Extensions】实现一个可以下载图片的Chrome插件

网上有许多的工具可以做这件事,但我还是自己用Chrome Extensions的方式倒腾倒腾。

在google上搜索了一下 Chrome Extensions Tutorial之后,大概了解他的实现框架。
实现具体功能的话主要有三个重要模块

  1. ManiFest.json,他是实现一个插件的基础,没有你可能无法把东西塞到Chrome里。有了的他的话,你至少可以在Chrome里看到他。
  2. background.js,全局的js设置。我不大懂js,看了教程以后,将它定义成配置插件作用域与全局变量的地方。
  3. popup.html,有了它你就可以你就可以自定义插件的功能,我感觉具体的功能应该写在这里面

按照官网的案例走,可以将https://developer.chrome.com 下的页面的背景颜色全部变成绿的。当然我自己改成了天蓝色,并做了一些失措型的改造。
在这里插入图片描述
接下来,我将尝试一下将一个页面上的符合规则的图片全部下载下来。

在搞的时候,我突然发现对应的网站图片做了一个防盗链的安全措施,如果我直接下载的话,会报一个403的Error
目前为止,发现了一个坑,如果使用chrome.tabs.executeScript(code, function callback)的话,function callback返回的是对象数组,而不是code返回的对象。我在多次尝试后,发现了array of any result 的含义。。。。。。所以,在取出code执行结果的时候,需要用result[0]包一层。

const command = `
	const images = document.getElementsByClassName('inner-container');
	alert(images.length);
	let array = new Array();
	for(let i = 0;i < images.length; i++){
		array[i] = images[i].querySelector('img').src;
	}
	array;
`;

 changeColor.onclick = function(element) {
 	chrome.tabs.executeScript(
 		{
 			code : command
 		},
 		function(result){
 		#大概这样 用在满足条件的网页,会输出一个url数组
 			alert(result[0]);
 		});
  };  

之后,再用在callback函数里写一下下载逻辑,因为下载逻辑是从别的地方抄过来的,所以这里就不贴代码了,逻辑就是利用图片的url去构造一个标签然后模拟点击下载。特别之处就在于,如果直接利用download下载的话,会因为chrome浏览器的逻辑,直接打开另外一个标签显示你的图片。所以需要利用canvas。

放一个GitHub仓库地址,如果有兴趣的话可以从魔改我的代码开始。

展开阅读全文
©️2020 CSDN 皮肤主题: 大白 设计师: CSDN官方博客 返回首页
实付0元
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值