拡張機能を使用してChromeブラウザーを使用してVKから音楽とビデオをダウンロードする

こんにちは、ガブラジテリ。 今日は、自分のペンを使ってVKからパソコンに音楽やビデオをダウンロードできるようにするためのJavascriptコードを共有したいと思います。 かっこいいクリップと音楽をどのように録音し、そこにアップロードしたか想像するのは難しくありませんが、あなたのコンピューターでは、この良いものはどこかに消えてしまいました...それは問題ではありません！ そこにダウンロードしたものを送り出します。 主なものは、これが私たちにとって私たちのブラウザであるということですが、サイトは許可されています。



まず、オーディオファイルを解析する必要があります...それでは、 「area clear_fix」クラスを取得し、 「play_new」クラスに属する配列に押し込みましょう。 まず、配列をスタイルに割り当てて、ページ上の要素の位置を取得します（その後、ボタンを並べて表示します）。 次に、 入力からリンクを取得し、 bタグから将来のファイルの名前を取得します。 次に、 ダウンロード属性を作成する新しいリンクを割り当てる必要があります。

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

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

いいね 1つの機能が用意されています。 ビデオファイルをダウンロードする方法について説明します...







繰り返しになりますが、 「video_box_wrap」クラスを取得し、この要素にdownloadvideoのid属性が含まれていない場合、およびYouTubeがスリップできる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”の自己生成リンクをダウンロード属性とともに 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」です。



このコードは、トレーニング/使用として多くの人に役立つと思います。 実際、すべてのjsコードは次のようになります。

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

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

皆さんに幸運を！