chrome扩展-save all image（来自chrome官方文档）

这几天，为了更好的给客户制作淘宝宣传视频，需要一张张的保存淘宝店的图图，太麻烦了，所以蹲坑时就想着搞个小功能。

本来想着很难，结果在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的数据。

很实用的一个小扩展哈。