How to take back music and video from VC using Chrome browser using its extension

Good afternoon, dear Habrovchane. Today I want to share with you codes on Javascript for the possibility of pumping music and video from VK with my pens on my personal computer. After all, it is not difficult to imagine how I recorded a cool clip and music, then uploaded them there, but on your computer all this stuff has gone somewhere ... Well, it does not matter! We will pump out what rightfully belongs to us back. The main thing is that this is our browser, but the site allows, it remains to think about it.

First we need to parse the audio files ... So, let's take the class “area clear_fix” and we will push into the array what belongs to the class “play_new”. First, we assign styles in the array in order to catch the position of elements on the page (later for displaying buttons next to each other). Then we get the links from the input and the name of the future file from the b tag. Then it will be necessary to assign new links, which we will create the download attribute.

function audio(){ var main_div=document.getElementsByClassName("area clear_fix"); for(var i=0;i<main_div.length;i++){ if(main_div[i].parentNode.firstChild.href){ main_div[i].parentNode.firstChild.style.top=main_div[i].getElementsByClassName('play_new')[0].offsetTop+"px"; continue; } var _mp3_=main_div[i].getElementsByTagName("input")[0].value.split(",")[0]; var _b_=main_div[i].getElementsByTagName("b")[0]; var _top_=document.getElementById(main_div[0].parentNode.id.replace('audio','play')).offsetTop+"px"; var _t_=main_div[i].getElementsByClassName('play_new')[0].offsetTop+"px"; var span=main_div[i].getElementsByTagName('span')[0]; var ispan=span.innerHTML; if(span.children[0]){ var ispan=span.children[0].innerHTML; } var _a_=document.createElement("a"); //_a_.href=""+_mp3_+"&name="+_b_.children[0].innerHTML+"-"+ispan; _a_.href = _mp3_.substring(0, _mp3_.indexOf('.mp3') + 4); _a_.download=trim(_b_.children[0].innerHTML+"-"+ispan)+".mp3"; _a_.title=' '+_b_.children[0].innerHTML+"-"+ispan; _a_.draggable="true"; _a_.innerHTML='<span style="cursor:copy;padding:6px;width:16px;height:16px;background-color:#5F7D9D;color:#fff;border-radius:2px;"><img src="http://st0.vk.me/images/icons/darr.gif" /></span>'; _a_.style.zIndex="10"; _a_.style.left="30px"; _a_.style.top=_t_; _a_.style.position="absolute"; main_div[i].parentNode.insertBefore(_a_,main_div[i].parentNode.firstChild); _b_.style.paddingLeft="27px"; } } 

')
Here, as it should be, everything should be ... well, but to cut off any rubbish after the file extension, we applied:
_a_.href = _mp3_.substring (0, _mp3_.indexOf ('. mp3') + 4);

In general, it is already possible to start this way in an interval, of course, if we are on the same site:

 setInterval(function(){ if(window.location.href.indexOf('vk.com')>1) { if(document.getElementsByClassName("area clear_fix").length!=0){ audio(); } } },1000); 

Good. One function is ready. It's time to tell about how to download video files ...


And again we firmly grab the class “video_box_wrap” and if this element does not contain the id attribute with downloadvideo, and if there is no IFRAME that we can slip into some YouTube, rutub, then we parse it.

 function videovk(){ if(document.getElementsByClassName("video_box_wrap")[0] && !document.getElementById('downloadvideo') && document.getElementById('video_player').tagName!='IFRAME'){ var invideo=""; var obj = new Object(); var name=new Array(); var content=new Array(); var fl=encodeURI(unescape(document.getElementsByClassName("video_box_wrap")[0].innerHTML.split(" ")[8].split('"')[1].replace(/amp;/g,""))); var flvars=fl.split("&"); for(var c=0;c<=flvars.length-1;c++){ name[c]=flvars[c].split("=")[0]; content[c]=flvars[c].split("=")[1]; } for(var c2=0;c2<=name.length;c2++){ obj[name[c2]]=content[c2]; } var countvid=0; if(obj.url240){ countvid+=1; var invideo=invideo+vv(obj.url240,'240',countvid,obj.md_title); } if(obj.url360){ countvid+=1; var invideo=invideo+vv(obj.url360,'360',countvid,obj.md_title); } if(obj.url480){ countvid+=1; var invideo=invideo+vv(obj.url480,'480',countvid,obj.md_title); } if(obj.url720){ countvid+=1; var invideo=invideo+vv(obj.url720,'720',countvid,obj.md_title); } if(obj.cache240){ countvid+=1; invideo=invideo+vv(obj.cache240,'240',countvid,obj.md_title); } if(obj.cache360){ countvid+=1; invideo=invideo+vv(obj.cache360,'360',countvid,obj.md_title); } if(obj.cache480){ countvid+=1; invideo=invideo+vv(obj.cache480,'480',countvid,obj.md_title); } if(obj.cache720){ countvid+=1; invideo=invideo+vv(obj.cache720,'720',countvid,obj.md_title); } var videodownloader=document.createElement("div"); videodownloader.style.height="auto";videodownloader.style.width="auto"; videodownloader.id="downloadvideo";videodownloader.style.paddingBottom="5px"; videodownloader.innerHTML=invideo; document.getElementById("mv_narrow").insertBefore(videodownloader, document.getElementById("mv_narrow").firstChild); } } 

... from the code it is clear that we form links to video options of different formats and add self-generated references with the id = "downloadvideo" download attribute immediately to the identifier mv_narrow.

And then we need the function vv to create links on the page. To recognize the Russian letters, we need the utf8_decode function, and to trim spaces around the edges, the trim function.

 function utf8_decode(utftext) { var string = ""; var i = 0; var c = c1 = c2 = 0; while ( i < utftext.length ) { c = utftext.charCodeAt(i); if (c < 128) { string += String.fromCharCode(c); i++; } else if((c > 191) && (c < 224)) { c2 = utftext.charCodeAt(i+1); string += String.fromCharCode(((c & 31) << 6) | (c2 & 63)); i += 2; } else { c2 = utftext.charCodeAt(i+1); c3 = utftext.charCodeAt(i+2); string += String.fromCharCode(((c & 15) << 12) | ((c2 & 63) << 6) | (c3 & 63)); i += 3; } } return string; } function trim(str) { return str.replace(/^[\s]+/,"").replace(/[\s]+$/,""); } function vv(a,b,c,d){ if(c%2!=0){ var p1="<p>"; var p2=""; } if(c%2==0 ){ var p1=""; var p2="</p>"; } return p1+"<a style='color:white;background-color:#2F5879;padding:5px 5px 2px 5px; border:#395A7C;' " + " draggable='true' title=': "+utf8_decode(trim(decodeURIComponent(d)))+"' download='"+utf8_decode(trim(decodeURIComponent(d)))+"."+a.substr(-3)+"' href='"+a+"'>"+b+" ("+a.substr(-3)+")</a> "+p2; } 

The main part of the code is ready, it remains to correct the interval:

 setInterval(function(){ if(window.location.href.indexOf('vk.com')>1) { if(document.getElementById('video_player') && document.getElementById("mv_narrow")){ videovk(); } if(document.getElementsByClassName("area clear_fix").length!=0){ audio(); } } },1000); 

Everything. when the code is ready, and now we need a manifest, here it is:

 { "manifest_version":2, "name":"Downloader", "version":"1.0", "description":"Downloader of mp3 files from vk.com and mail.ru.", "permissions": [ "http://vk.com/*", "tabs" ], "content_scripts": [ { "js": [ "main.js" ], "matches": [ "http://vk.com/*", "http://*.vk.com/*", "https://vk.com/*", "https://*.vk.com/*" ], "run_at": "document_end" } ], "content_security_policy": "script-src 'self' 'unsafe-eval'; object-src 'self'", "browser_action": { "default_title":"Downloader Extension" } } 

In the content_scripts we write that our code with functions will be stored in the main.js file, which will be loaded after the page loads, that is, “run_at”: “document_end”.