最近有个需求是:自动抓取某网站登录页面的验证码图片并保存,抓取n次。使用chrome插件来实现,其中使用到了js操作文件系统的api,特将代码记录下来,以备查阅。
PS:第一次使用js文件系统的api,百度了很久很多文章,大部分文章都很详细的解释介绍了api具体某个对象、方法的使用,但是很少有全部代码从零到功能实现的全部代码贴出,导致我这个新手一头雾水,甚至在文件保存完后,去哪里看保存的文件这个问题上都折腾了一两个小时。正是这些所谓的基础的东西反而因为没有人介绍导致很多无用功。此处贴出全部的代码,希望少走弯路。
以下是chrome插件的content.js的全部代码:
1 $(function(){ 2 if(window.location.href.indexOf('www.***.com/logout.action')!=-1 || window.location.href.indexOf('www.***.com/logon.action')!=-1){//登录页,示例隐藏了真实地址,避免不必要的纠纷 3 saveImg(); 4 } 5 }); 6 /** 7 * 保存图片的方法 8 */ 9 function saveImg(){ 10 var count = 0; 11 var max = 100;//修改max的值定义需要抓图的张数 12 var intev = setInterval(function(){ 13 window.requestFileSystem = window.requestFileSystem || window.webkitRequestFileSystem; 14 window.requestFileSystem(window.TEMPORARY, 5*1024*1024, initFS, errorHandler);//申请文件系统,将initFS方法作为文件处理的方法,方法回调时会见文件系统对象fs作为参数传入 15 count ++; 16 if(count > max){//抓够张数后停止 17 clearInterval(intev); 18 } 19 },5000);//每5秒刷新一张图 20 } 21 /** 22 * 点击验证码,刷新验证码并返回验证码的值,该网站使用的本地js生成的验证码,验证逻辑也是在本地js中完成,插件为gVerify.js 23 */ 24 function refreshImg(){ 25 var img = $('#verifyCanvas'); 26 $(img).click(); 27 //因为chrome插件和原网页的js运行环境不能相互访问(但插件js可以访问员网页的dom),使用向原网页插入script并在script中执行“将原网页js环境的变量绑定到页面dom节点后再访问”的办法获取值。 28 var script = document.createElement('script'); 29 script.type = 'text/javascript'; 30 script.innerHTML = "document.body.setAttribute('code', verifyCode.options.code);"; 31 document.head.appendChild(script); 32 document.head.removeChild(script); 33 var code = document.body.getAttribute('code'); 34 console.log(code); 35 return code; 36 } 37 /** 38 *文件处理方法,注意文件系统不同于操作系统的本地文件系统,只是浏览器运行环境中的一个虚拟的沙箱中的文件系统。在本地文件系统中无法搜索、查看到文件,查看文件的办法:浏览器输入地址查看(中间是网站的域名,每个网站的文件系统相互独立)filesystem:https://www.***.com/temporary/ 39 */ 40 function initFS(fs){ 41 createDir(fs.root, '/img/'.split('/'));//创建目录 42 var img_code = refreshImg(); 43 //写文件 44 fs.root.getFile('/img/'+img_code + '.png', {create: true, exclusive: true}, function(fileEntry) { 45 fileEntry.createWriter(function(fileWriter) { 46 fileWriter.onwriteend = function(e) { 47 console.log("Write successfully"); 48 }; 49 fileWriter.onerror = function(e) { 50 console.log("Write error!"); 51 }; 52 var img_base64_url = $('#verifyCanvas')[0].toDataURL('image/png');//获取图谱的base64地址 53 var content = base64ToBinary(img_base64_url); 54 var bob = new Blob([content]); 55 fileWriter.write(bob);//查看文件地址:浏览器输入filesystem:https://www.yqt365.com/temporary/ 56 }); 57 }, errorHandler); 58 } 59 /** 60 *异常处理 61 */ 62 function errorHandler(err){ 63 var msg = 'An error occured: '; 64 65 switch (err.code) { 66 case FileError.NOT_FOUND_ERR: 67 msg += 'File or directory not found'; 68 break; 69 70 case FileError.NOT_READABLE_ERR: 71 msg += 'File or directory not readable'; 72 break; 73 74 case FileError.PATH_EXISTS_ERR: 75 msg += 'File or directory already exists'; 76 break; 77 78 case FileError.TYPE_MISMATCH_ERR: 79 msg += 'Invalid filetype'; 80 break; 81 82 default: 83 msg += 'Unknown Error'; 84 break; 85 }; 86 87 console.log(msg); 88 }; 89 /** 90 *创建目录 91 */ 92 function createDir(rootDir, folders) { 93 rootDir.getDirectory(folders[0], {create: true}, function(dirEntry) { 94 if (folders.length) { 95 createDir(dirEntry, folders.slice(1)); 96 } 97 }, errorHandler); 98 }; 99 /** 100 * 看方法名称都懂啦 101 */ 102 function base64ToBinary(imgUrl) { 103 var BASE64_MARKER = ';base64,'; 104 var base64Index = imgUrl.indexOf(BASE64_MARKER) + BASE64_MARKER.length; 105 var base64 = imgUrl.substring(base64Index); 106 var raw = window.atob(base64); 107 var rawLength = raw.length; 108 var array = new Uint8Array(new ArrayBuffer(rawLength)); 109 110 for (i = 0; i < rawLength; ++i) { 111 array[i] = raw.charCodeAt(i); 112 } 113 return array; 114 } 115 116