这几天,为了更好的给客户制作淘宝宣传视频,需要一张张的保存淘宝店的图图,太麻烦了,所以蹲坑时就想着搞个小功能。
本来想着很难,结果在chrome官方文档里就有这个小栗子:
功能是这样滴:一键保存当前页面所有需要的图片。
思路是这样哈:
1、获取页面上的<img>标签,弄到标签里的src属性,也就是url。
搞个main.js文件。
[].map.call(document.getElementsByTagName('img'), function(img){
return img.src;
});
2、图片的url判断后,挑出自己想要的图片格式。
3、调用下载接口,将要下载的图片url作为参数传到接口。
4、下载完成。
代码如下:
chrome.contextMenus.onClicked.addListener(function(info, tab){
if(info.menuItemId == 'saveall'){
//为页面加载
chrome.tabs.executeScript(tab.id, {file: 'main.js'}, function(results){
if (results && results[0] && results[0].length){
//循环遍历出所有url
results[0].forEach(function(url) {
if(url.indexOf(".jpg") != -1){
//下载接口
chrome.downloads.download({
url: url,
conflictAction: 'overwrite',
saveAs: false
});
}
});
}
});
}
});
哦对,上面这个绑定的是一个右键菜单的点击事件,对应下面的这个菜单:
chrome.runtime.onInstalled.addListener(function(){
chrome.contextMenus.create({
'id':'saveall',
'type':'normal',
'title':'保存所有图片',
});
});
上上述代码中,用了一个chrome的download接口,其中的conflictAction属性有三个选项:
这儿用的是overwrite(覆盖),还有uniquify(后面加(num)),最后一个是prompt(提示用户自己决定重命名还是啥)。
这个接口还有options:
filename:文件名
saveAs:是否弹出另存为窗口
method:请求方式(p还是g)
headers:自定义header数组(?)
body:post的数据。
很实用的一个小扩展哈。