唠一唠、

今天呢，我们来开发一款谷歌浏览器插件，这是一款怎样的插件呢？接下来我就为大家揭秘其神秘的面纱。这是一款面向网页，分类抓取图片资源，视频资源，链接资源（包括压缩包等），并且实现了资源可筛选，可选择，链接复制，资源批量下载，自定义下载的文件夹功能。反正一句话，妥妥的方便，终于可以解放双手了，不用到处右键另存为啦！而且有些页面还做了右键另存为屏蔽，尴尬。所以，恭喜你，有了这款插件，一切的一切都可以解决啦！

一、最终预览效果

1. 图片批量下载

（1）图片批量下载界面展示

（2）下载后的预览

2. 视频批量下载

（1）视频批量下载界面展示

（4）视频下完后预览

3. 链接批量复制

（1）链接展示界面

（2）链接复制操作

（3）粘贴复制的链接

二、开发流程

1. pupup.html页面

用于展示，批量下载可操作的界面层

<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><title>图片批量下载</title><style type="text/css">*{margin:0;padding:0}</style><link rel="stylesheet" type="text/css" href="./styles/bootstrap.min.css" /><link rel="stylesheet" type="text/css" href="./styles/popup.css" />
</head>
<body><div class="wrap"><!-- 筛选输入框 --><header class="filter-header container"><div class="row row-radio"><div class="col-xs-9"><b>请筛选资源类型：</b><input type="radio" name="optionsRadios" id="optionsRadios1" value="img" checked> 图片<input type="radio" name="optionsRadios" id="optionsRadios2" value="video" >  视频<input type="radio" name="optionsRadios" id="optionsRadios3" value="link" >  链接</div><div class="col-xs-3"></div></div><div class="row"><div class="row-box"><input type="text" class="form-control folder-name" placeholder="请输入文件夹名称" /></div><div class="row-box"><!--  <button type="button" class="btn btn-primary search-filter">筛选资源</button> --></div></div><div class="row row-check"><input type="checkbox" id="checkAll" value="false" /> <span class="allSelectText">全选</span></div></header><!-- 滚动盒子 --><div class="img-wrap-box"><span class="label label-info label-extension-info">无资源数据</span><!-- 显示所有图片框 --><section class="img-wrap" id="img-wrap"><!--每一项--><dl class="img-item"><dt class="img-item-dt"><img src="./images/img.jpg" class="dt-img"/></dt><dd class="img-item-dd"><input type="checkbox" name="img-check" class="checkBoxItem" value="" /><span class="item-name">img-item</span></dd></dl></section></div><!-- 下载操作 --><div class="downBox"><button type="button" class="btn btn-primary btn-down">下载资源</button><button type="button" class="btn btn-info btn-links">复制链接</button></div><textarea id="textPanle"></textarea></div><script type="text/javascript" src="./scripts/jquery.js"></script><script type="text/javascript" src="./scripts/bootstrap.min.js"></script><script type="text/javascript" src="./scripts/popup.js"></script>
</body>
</html>

2. popup.js 逻辑

popup的逻辑依赖jquery开发，也是为了更加方便的控制popup页面的dom元素，主体代码逻辑主要包括：

（1）注入inject.js脚本到页面

chrome.windows.getCurrent(function (currentWindow) {chrome.tabs.query({active: true, windowId: currentWindow.id},function(activeTabs) {self.tabId = activeTabs[0].id;chrome.tabs.executeScript(self.tabId, {file: 'scripts/inject-page.js', allFrames: false},()=>{self.addListenRequest();});});
});

（2）根据筛选条件，发送资源type到inject层，然后接收到数据，渲染dom结构

getHTML(){var str = '';var info = {name: '', imgSrc: ''};switch(this.type){case 'img': info.name = '图片';info.imgSrc = ''; break;case 'video': info.name = '视频';info.imgSrc = './images/video.jpg'; break;case 'link': info.name = '链接';info.imgSrc = './images/link.png'; break;default: info.name = '图片';info.imgSrc = ''; break;}for(var i=0;i<this.imgArr.length;i++){str += `<dl class="img-item" data-source="${this.imgArr[i]}"><dt class="img-item-dt"><img src="${info.imgSrc ? info.imgSrc: this.imgArr[i]}" class="dt-img"/></dt><dd class="img-item-dd"><input type="checkbox" name="img-check" value="" class="checkBoxItem"/><span class="item-name">${info.name+'_'+(i+1)}</span></dd></dl>`;}return str;
}

（3）批量下载

//下载
download(){//判断是否可以下载let info = {name: '', suffix: ''};switch(this.type){case 'img': info.name = '图片'; info.suffix = 'png'; break;case 'video': info.name = '视频'; info.suffix = 'mp4'; break;case 'link': alert('该类型无法下载'); return; break;default: info.name = '图片'; info.suffix = 'png'; break;}//获取文件夹名称let folderName = $('.folder-name').val().replace(/\s*/g,'');let folderPath = '';folderPath = (folderName.length > 0 ? ('download/'+ folderName +'/') : 'download/');let checkedArr = this.selectChecked();this.imgArr.length > 0 && this.imgArr.map((v,i)=>{if(checkedArr[i]){if(this.type == 'video' && v.search('blob') > 0){var a = document.createElement('a');document.body.appendChild(a);a.download = folderPath + info.name+'_'+this.randomStr(10)+'.'+info.suffix;a.href = window.URL.createObjectURL(v);a.click();document.body.removeChild(a);}else{chrome.downloads.download( { url: v , filename: folderPath + info.name+'_'+this.randomStr(10)+'.'+info.suffix} , function(downloadId){console.log(downloadId);});}}});
}

（4）复制链接

copyLinks(){let getLinks = [];if(!this.selectChecked()){alert('请选择资源');return;}let checkedArr = this.selectChecked();this.imgArr.length > 0 && this.imgArr.map((v,index)=>{if(checkedArr && checkedArr[index]){getLinks.push(this.imgArr[index]);}})let links = getLinks.join('\n');$('#textPanle').val(links);$('#textPanle').get(0).select();document.execCommand("Copy");alert('复制成功！');
}

3.inject.js 逻辑

Inject脚本里面的逻辑最为简单，只需要随时监听popup传来的事件即可，然后根据传递来的type值，去获取当前页面的资源，返回给popup

//获取所有的元素
function getAllLinks(tag){var links = [].slice.apply(document.getElementsByTagName(tag));var oLinks = links.map(v => {var clink = '';switch(tag){case 'img' : clink = v.src; break;case 'video' : clink = v.src; break;case 'a' : clink = v.href; break;default: clink = v.src; break;}return clink;});return oLinks;
}// 监听popup页面发送的请求
chrome.runtime.onMessage.addListener((request, sender, sendResponse) => {switch(request.type){case 'img':sendResponse(getAllLinks('img'));break;case 'video':sendResponse(getAllLinks('video'));break;case 'link':sendResponse(getAllLinks('a'));break;default:sendResponse(getAllLinks('img'));break;}
});

4.通信逻辑（可以采用长连接代替短连接）

// 添加监听
addListenRequest() {chrome.tabs.sendMessage(this.tabId, {type: this.type},(res)=>{this.imgArr = res;//过滤不和规定的视频资源this.filterVideos();this.render();});
}

三、踩过的坑

1.点击按钮复制，复制不上
在popup页面新建一个textarea，且不能设置visibility:hidden;只能设置opacity:0

2.通信
发出通信的时候，把chrome.runtime替换成chrome.tabs

3.事件多次绑定，导致多次执行
每次重新渲染，需要初始化清除所有的绑定事件

四、不足

由于时间上还是有些赶制，有些功能还没有非常的完善

1. 后期还可以添加音频资源批量下载
2. 视频资源只支持MP4格式下载，无法解析blob、flash等资源链接
3. 可以使用Blob新增一个生成链接文档的按钮

四、github源码地址（欢迎star）

https://github.com/RiversCoder/chrome-extension

致自己：静下心来，坚持自己喜欢的，持之以恒 ~ ~

手把手带你开发一个批量下载资源的谷歌浏览器扩展相关推荐

记录--手把手带你开发一个uni-app日历插件（并发布）
这里给大家分享我在网上总结出来的一些知识,希望对大家有所帮助相信我们在开发各类小程序或者H5,甚至APP时,会把uni-app作为一个技术选型,其优点在于一键打包多端运行,较为强大的跨平台的性能.但 ...
Linux环境，手把手带你实现一个Nginx模块，深入了解Nginx丨惊群效应|error|负载均衡|Openresty丨C/C++Linux服务器开发丨中间件
Linux环境,手把手带你实现一个Nginx模块,深入了解Nginx 视频讲解如下,点击观看: Linux环境,手把手带你实现一个Nginx模块,深入了解Nginx丨惊群效应|error|负载均衡|O ...
手把手带你写一个JavaScript类型判断小工具
业务写了很多,依然不是前端大神,我相信这是很多'入坑'前端开发同学的迷茫之处,个人觉得前端职业发展是有路径可寻的,前期写业务是一个积累过程,后期提炼总结,比如编程思想,父子类的原型继承,还是对象之间的 ...
手把手带你撸一个校园APP（五）：新闻中心模块
这个项目是很早之前在学校做的,如今再回首.很多代码很是粗糙,逻辑也不尽完善.还望各位看官海涵. 前言通过上一篇文章的功能设计,我们可以发现新闻通知公告等是APP的最主要功能点.主要是聚合展示学校官网 ...
【NLP】Pyhon+讯飞开放平台:手把手带你写一个智能语音播报系统
手把手带你写一个智能语音播报系统. 微信扫码登陆讯飞开放平台:https://www.xfyun.cn/ 完成个人认证. 在控制台创建应用,注意应用名称全库查重,很容易跟别人重复. 可查看到pytho ...
手把手带你撸一个校园APP（六）：失物招领二手交易模块
代码经过简单的整理,已经放到Github上了.https://github.com/zhengweichao/Hevttc 回首来看,代码质量一般,里面也有各种逻辑问题,还望各位看官海涵.接下来有时间 ...
【技术分享篇】Linux内核——手把手带你实现一个Linux内核文件系统丨Linux内核源码分析
手把手带你实现一个Linux内核文件系统 1. 内核文件系统架构分析 2. 行行珠玑,代码实现 [技术分享篇]Linux内核--手把手带你实现一个Linux内核文件系统丨Linux内核源码分析更多L ...
物联网全栈教程--手把手教你开发一个智能浇花器
下面来说一下课程的安排,本教程可以分为三大章节,30个小章节,在1-10章节,手把手讲解了如何实现一个定时/实时控制的浇花器,可以对浇花器电量进行显示,可以进行定时设置,以及实时控制,低功耗模式等等, ...
带你开发一个远程控制项目----＞STM32+标准库+阿里云平台+传感器模块+远程显示-------之 MQTT连接阿里云平台
目录第一篇: 第二篇: 项目清单视频验证效果 Android Studio开发介绍步1:此次需要下载本人开发的MQTT阿里云连接项目步2:替换阿里云设备三元信息查看三元替换 Androi ...

手把手带你开发一个批量下载资源的谷歌浏览器扩展