MUZBANK



A Most Complete Bank Of Music Information

МУЗЫКАЛЬНО-ИНФОРМАЦИОННЫЙ БАНК






    Расширение скачивания музыки для браузера Chrome своими руками (ВКонтакте, МайлМир)

    15 December 2013

    Сегодня мы с Вами познакомимся с тем, как создать расширение для браузера Chrome, позволяющее скачивать музыкальные файлы со своей страницы из ВКонтакте и с МайлМира.



    Представим ситуацию, будто Вы загрузили песню, которую сочинили в социальную сеть, но Ваш компьютер в один момент подвел Вас и ваши файлы пропали. Вы конечно захотите восстановить эти файлы у себя на компьютере. Конечно же любому музыканту захочется вернуть себе свое творение, для того чтобы иметь возможность разместить его еще на каком либо сайте. А устанавливать какое либо расширение или программу не понимая его сути боязно некоторым пользователям. Вот этому и посвящен наш пост. Мы с Вами в первую очередь научимся писать расширения для браузера Chrome, а во вторую - мы получим готовое к использованию расширение!


    Готовое решение Вы можете установить из Google Webstore по ссылке https://chrome.google.com/webstore/detail/muzbank-downloader/ilfcakpppbaleonehcahbogdkbcheadk



    Другой вариант - пишем все сами:

    В общем так, если у Вас расширение уже готово - заходите по ссылке chrome://extensions/ или же через Меню -> Инструменты -> Расширения. Отметьте там галочку  Режим разработчика и нажмите кнопку Загрузить распакованное расширение.


    Вариант перейти на Webstore и установить необходимое Вам расширение, конечно проще, но нам важно понять механизм.


    Первым делом создадим рисунок icon.png размерами примерно 48x48


    Сразу нам следует написать файл popup.html выпадающего окна нашего расширения:


    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="windows-1251" />
    <title>Document</title>
    <meta name="keywords" content="" />
    <meta name="description" content="" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="jquery.min.js"></script>
    <script src="script.js"></script>
    <style>
    *{margin:0; padding:0;}
    a, a:visited{color:#0857a6}
    body{width:500px;padding:10px;font-family:Trebuchet MS, Arial, Tahoma, Sans;overflow:auto;}
    .aligncenter {display: block; margin-left: auto; margin-right: auto; text-align:center; font-size:18px;}
    </style>
    </head>
    <body>
    <div class="aligncenter"><a href="http://muzbank.net/" target="_blank">MUZBANK</a></div>
    <div id="wrapper"></div>
    </body>
    </html>
     



     

    На следующем этапе создаем manifest.json, это некий конфигурационный файл, в котором мдаем разрешение обращаться к сайтам ВК и МайлМир, а также к вкладкам самого браузера:



    {
    "manifest_version":2,
    "name":"Muzbank Downlowder",
    "version":"1.0",
    "description":"Muzbank Downlowder",
    "permissions": [
    "http://vk.com/*",
    "tabs",
    "http://my.mail.ru/*",
    "tabs"
    ],
    "browser_action": {
    "default_title":"Muzbank Downlowder",
    "default_icon":"icon.png",
    "default_popup":"popup.html"
    }
    }




    Тут же мы указываем название и описание нашего расширения, и иконку icon.png которая будет отображаться в последствии в панели 


    Потом нам нужно будет скачать файл с библиотекой jquery, чтобы подключить его к нашему расширению для работы следующего скрипта. 


    Собственно говоря далее подключаем самый важный наш файл script.js со следующим содержимым:


    $(document).ready(function () {
    chrome.tabs.getSelected(null, function (tab) {
    var url = tab.url;
    if (url.indexOf("http://vk.com/audio") > -1) {
    $('#wrapper').append('VK:<br />');
    xhr = new XMLHttpRequest();
    xhr.open("GET", url, true);
    xhr.send(null);
    xhr.onreadystatechange = function () {
    if (xhr.readyState == 4) {
    if (xhr.responseText) {
    var data = xhr.responseText;
    $('.audio', data).each(function (index) {
    var title = $(this).children('.area').children('.info').children('.title_wrap').text();
    var href = $(this).children('.area').children('.play_btn').children('input').val();
    href = href.substring(0, href.indexOf('.mp3') + 4);
    title = '<a href="' + href + '" download>' + title + '</a>';
    $('#wrapper').append(title + '<br />');
    });
    }
    }
    }
    } else {
    if (url.indexOf("http://my.mail.ru/my/audio") == -1) $('#wrapper').html('Audio not found');
    }
    });
    });


    $(document).ready(function () {
    chrome.tabs.getSelected(null, function (tab) {
    var url = tab.url;
    if (url.indexOf("http://my.mail.ru/my/audio") > -1) {
    $('#wrapper').append('Mail:<br />');
    xhr = new XMLHttpRequest();
    xhr.open("GET", url, true);
    xhr.send(null);
    xhr.onreadystatechange = function () {
    if (xhr.readyState == 4) {
    if (xhr.responseText) {
    var data = xhr.responseText;
    $('.jp__track', data).each(function (index) {
    var title = $(this).attr('data-author')+'-'+$(this).attr('data-name')+' ('+$(this).attr('data-duration')+')';
    var href = $(this).attr('data-url');
    href = href.substring(0, href.indexOf('.mp3') + 4);
    title = '<a href="' + href + '" download>' + title + '</a>';
    if (url.indexOf(href) < 0) $('#wrapper').append(title + '<br />');
    });
    }
    }
    }
    } else {
    if (url.indexOf("http://vk.com/audio") == -1) $('#wrapper').html('Audio not found');
    }
    });
    });


     


    Что же тут написано... Здесь написано, что если мы находимся на странице с плейлистом нам необходимо пройти в цикле по всему плейлисту в DOM-дереве, выбрать нужные нам элементы на странице и сформировать из них готовые ссылки с атрибутом download.


    Этот атрибут крайне важен для нас - именно он дает нам возможность скачивать файлы непосредственно из браузера. Конечно можно было бы попробовать использовать и значение атрибута target="_blank", но в том случае запускается проигрывание файла внутренним плагином в браузере Chrome, что собственно не помешает нам нажать на кнопку "Сохранить как...", но мы решили что так лучше.


     


    Исходники, более улучшенные нежели информация в примере, приведенная для обучения, на нашем сайте, с поиском-подсветкой, кнопками на нужные страницы Вы можете скачать здесь:  Расширение для браузера


     


     





    Авторизация





    Зарегистрироваться

    M

    Дата и время

    • 07:54:41
       

    Социальные ссылки


    Наши приложения

    • Muzbank App Play Market
    • Muzbank Amazon App