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

最新推荐文章于 2025-02-28 23:30:53 发布

大蒜头的季节

最新推荐文章于 2025-02-28 23:30:53 发布

阅读量2k

点赞数 5

分类专栏：小工具合集文章标签： javascript html5 chrome

本文链接：https://blog.csdn.net/weixin_46278125/article/details/141873632

版权

小工具合集专栏收录该内容

3 篇文章

订阅专栏

前言

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

正文

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

10秒钟分析网页

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

打开控制台（按键盘F12）
点击箭头所指的按钮再点击页面上随便一张图片
观察控制台找到该图片的class名称（img开头的就是图片）
复制这个class名称（标红线处），粘贴到插件的输入框，选择“图片本身的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)
	}
})