【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仓库地址，如果有兴趣的话可以从魔改我的代码开始。