О том как забирать обратно музыку и видео с ВК средствами браузера Chrome, используя свое расширение

Добрый день уважаемые Хабровчане. Сегодня хочу поделиться с Вами кодами на Javascript для возможности перекачивания музыки и видео с ВК своими ручками на свой персональный компьютер. Ведь нетрудно себе представить, как записал клевый клип и музыку, потом закачал их туда, но на твоем компьютере все это добро куда то пропало… Что же, не беда! Мы выкачаем то, что по праву принадлежит нам обратно. Главное что нам это наш браузер да сайт позволяют, главное — пораскинуть мозгами.

Для начала нам надо распарсить аудиофайлы… Итак, возьмемся за класс "area clear_fix" и будем пихать в массив то, что принадлежит к классу "play_new". Сначала присвоим в массиве стили, чтобы отловить положение элементов на странице (в последующем для отображения кнопочек рядышком). Потом получим ссылки из input и имя будущего файла из тега b. Потом нужно будет присваивать новым ссылочкам, которые мы будем создавать атрибут download.

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";   } } 

Тут как бы понятно должно быть, все… ну а чтобы отрезать всякий мусор после расширения файла мы применили:
_a_.href = _mp3_.substring(0, _mp3_.indexOf(‘.mp3’) + 4);

В общем уже можно это запустить таким образом через интервал, конечно же если мы находимся на том самом сайте:

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

Хорошо. Одна функция готова. Пора поведать и о том как скачать видеофайлы…

И снова крепко хватаемся за класс "video_box_wrap" и если данный элемент не содержит атрибута id с downloadvideo, и если нет IFRAME, который нам может подсунуть какой-нибудь ютуб, рутуб — то разбираем его.

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); 	} } 

… из кода понятно что мы формируем ссылки на варианты видео разного формата и добавляем самостоятельно сформированные ссылочки с id=«downloadvideo» атрибутом download сразу к идентификатору mv_narrow.

А дальше нам нужна функция vv для создания ссылок на страничке. Чтобы распознавались русские буквы нам понадобится функция utf8_decode, а чтобы обрезать пробелы по краям функция trim.

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; } 

Основная часть кода готова, осталось поправить интервал:

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); 

Все. когда код готов, и теперь нам нужен манифест, вот он:

{  "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" 	 } } 

В content_scripts мы пишем что наш код с функциями будет храниться в файле main.js, который будет подгружаться после загрузки страницы, т. е. «run_at»: «document_end».

P.S. Мне нравится Хабр, здесь всегда есть что почитать, но статьи растут как снежный ком и поэтому эту статью я сохраню для себя на сайте персональных закладок vzakladke.net и может даже код в заметках — она в любой момент (на другом компьютере) может мне снова пригодиться. Если Вам понравилась статья комментируйте, добавьте что-нибудь от себя к этой статье еще.
P.P.S. Я считаю, что здоровое общество должно делиться информацией и развиваться.