【网页图片批量下载器】图片只要能看到就能下载，别再一张一张保存啦

前言

  昨天逛壁纸网站的时候，看到几张不错的图片，想保存下载当头像的，但无奈图片种类太多，一张张下载太慢，于是一怒之下😡开发了这款图片批量下载神器😎！

正文

进入正题！这是一款浏览器扩展，稍微需要一点点前端知识就能驾驭哈，小白也不用担心，我会一步一步教大家使用的。

10秒钟分析网页

以bootcdn网站为例，批量下载该网站上方的几张图片。

1. 打开控制台（按键盘F12）

2. 点击箭头所指的按钮再点击页面上随便一张图片

3. 观察控制台找到该图片的class名称（img开头的就是图片）

4. 复制这个class名称（标红线处），粘贴到插件的输入框，选择“图片本身的class名称”模式，然后点击下载按钮

   开始享受唰唰唰下载的快乐吧😄😄！

细心的小伙伴发现了，这个路径是个相对路径，所以我们需要拼接上当前的网址！

  但有时候，img标签可能没有class名称（如下图），那这个时候我们就需要向上找一找，看看它的父元素是否包含class名称，一般都是包含的，我们复制父元素的class名称，然后模式选择“包裹图片的class名称”，也能够实现下载！

核心代码

// popup.js
$(function(){
    $('#downloadBtn').click(()=>{
        var className = $("#clazz").val()
        if (className=='' || className==null || className==undefined){
            return
        }
        var selectedRadio = $('input[name="exampleRadio"]:checked').val()
        chrome.tabs.query({active:true, currentWindow:true}, function (tab) {
            chrome.tabs.sendMessage(tab[0].id, {  
               action: "url",className,selectedRadio
            }, function (urls) {
                for (let index = 0; index < urls.length; index++) {
                    const url = urls[index]
                    chrome.downloads.download({
                        url: url,
                        conflictAction: 'uniquify',
                        saveAs: false
                    });
                }
            });
        });
    })
})

// content.js
chrome.runtime.onMessage.addListener(function (request, sender, sendResponse) {
	const action = request.action;
	switch (action) {
		case "url":
			const className = request.className;
			const radioVal = request.selectedRadio;
			let urls = []
			for (let index = 0; index < $("."+className).length; index++) {
				const imgItem = $("."+className)[index];
				// 1代表使用包裹图片的class向下追踪图片，2代表直接使用图片本身的class
				const url = radioVal==1?$(imgItem).find('img').attr('src'):$(imgItem).attr('src')
				// 需要注意，图片可能是相对路径,如果是相对路径则需要拼接上网址
				urls.push(url.startsWith("http")?url:window.location.href+url)
			}
			sendResponse(urls)
	}
})

总结

好了，小工具就分享到这边啦！完整代码关注公众号【好券菌】，回复【图片下载】即可免费领取😄😄，公众号还有更多福利送给大家！

本工具仅供学习参考之用，切勿用于商业用途，正儿八经要商用的图片还得作者授权才行，不过一般现在能在页面上免费获取到的，都是带水印的，哈哈！