У магазині розширень chrome напевно вже є завантажувачі пісень з вконтакте, але ми спробуємо написати свій.
Наше розширення буде додавати посилання в кожну з пісень розділу Мої Аудіозаписи, Яка буде завантажувати пісню.
Виглядати має приблизно так:
Давайте почнемо.
Взагалі, писати розширення не так вже й складно. Розширення - це всього лише це файл-опис + html / js / css контент. Наше буде складатися з трьох файлів - файлу опису (manifest.json), що впроваджується js скрипта (vk_inject.js), і впроваджуваного файлу стилів vk_styles.css).
Головний файл в розширенні - це, звичайно, manifest.json. У ньому міститься дескриптор розширення, і посилання на впроваджувані файли.
mainfest.json
( "Manifest_version": 2, "name": "Завантажувач музики з vk.com", "description": "Дозволяє вам завантажити музику з соціальної мережі Вконтакте.", "Version": "1.0", "content_scripts": [( "matches": [ "*: //vk.com/audios*"], "js": [ "vk_inject.js"], "css": [ "vk_styles.css"])])
Поки нічого складного. Крім опису, тут міститься тег «content_scripts», який визначає, які js і css файли будуть впроваджені в сторінку.
В даному випадку, наше розширення буде вбудовувати файли vk_inject.js і vk_styles.css в кожну сторінку, яка підходить за адресою до маскам http://vk.com/audios* або https://vk.com/audios*. Це як раз ті адреси, де містяться наші (або інших користувачів) аудіозаписи на сайті Вконтакте.
Файл стилів (vk_styles.css) буде дуже простий. Ми всього лише визначимо css клас для впроваджуваної посилання.
Обов'язково потрібно стежити, щоб клас не перетинався зі стилями вихідної сторінки.
Звичайно, ми можемо обійтися і без впроваджуваного css файлу, і просто поставити всі стилі в коді при створенні елемента посилання, але я
хочу показати вам можливість впровадження стилів. Ви також можете перевизначити стилі для своїх посилань.
vk_styles.css
.downloadLink (float: right;)
Практично всі дії будуть відбуватися під впихається коді vk_inject.js.
Отже, що будемо робити:
Сторінка vk.com/audios* містить два списки пісень - 1) початкові аудіозаписи на вашій сторінці - елемент
Проблема в тому, в кожному з цих списків можуть додаватися або віддалятися записи. Нам потрібно стежити за цим.
Впроваджуваний скрипт виповнюється в окремій віртуальній машині, і не може взаємодіяти зі скриптом на станиці. Тому ми не можемо перевизначати вихідні функції або якось інакше перехоплювати js код на вихідній сторінці.
Але, на щастя, обидва ці скрипта поділяють DOM-дерево, так що ми будемо стежити за оновленнями DOM елементів списку за допомогою MutationObserver.
vk_insert.js
(Function () (// обгорнемо все в безіменну функцію, щоб не створювати глобальних змінних - просто хороший тон var observer \u003d new MutationObserver (listModified); // створюємо об'єкт observer -\u003e викликає listModified при кожній зміні DOM var initialList \u003d document.getElementById ( "initial_list"); // список початкової музики на нашій сторінці if (initialList) (// список вже був заповнений при підключенні розширення - додаємо посилання "Завантажити" для кожного запису в ньому var rows \u003d initialList.children; for (var i \u003d 0; i< rows.length; i++)
{
addDownloadLink(rows[i]); // добавляем ссылку
}
observer.observe(initialList, {childList: true}); // следим за изменениями в изначальном списке тоже
}
// список аудиозаписей при поиске
var searchList = document.getElementById("search_list");
if (searchList)
{
// search_list изначально всегда пустой, нам нужно только отрабатывать добавление песен в него
observer.observe(searchList, {childList: true}); // следим за ним
}
// вызывается, когда в список песен добавляются (или удаляются) элементы
function listModified(mutations)
{
for (var i = 0; i < mutations.length; i++)
{
var mut = mutations[i];
if (mut.type != "childList")
{
return;
}
// пройдемся по добавленным песням
for (var j = 0; j < mut.addedNodes.length; j++)
{
addDownloadLink(mut.addedNodes[j]);
}
// удаленные записи - mut.removedNodes игнорируем
}
}
// функция добавляет ссылку "Скачать" к разметке песни
function addDownloadLink(row)
{
var titleNode = row.querySelector("div.title_wrap"); // Исполнитель песни + название
if (!titleNode) // если ничего не работает (может, разметка была изменена?)- выйдем
{
return;
}
var input = row.querySelector("div.play_btn > input "); // знайдемо input, в якому зберігається url if (! input) (return;) var ref \u003d input.getAttribute (" value "); // сам URL файлу ref \u003d ref.substr (0, ref.indexOf ( "?")); // обрізаємо все після "?", щоб залишити тільки посилання на mp3 var link \u003d document.createElement ( "a"); link.className \u003d "downloadLink"; // додамо css клас "downloadLink" для нашого лінку link.textContent \u003d "Завантажити"; link.setAttribute ( "download", titleNode.textContent + ".mp3"); // ім'я файлу для завантаження link.setAttribute ( "href", ref); link.addEventListener ( "click", function (event) (// при кліці на нашу посилання, скасуємо запуск програвача event.stopPropagation ();)); titleNode.appendChild (link);))) ();
Встановлюємо розширення.
Отже, все три файли готові. Ви можете скопіювати їх з поста або завантажити архівом.У браузері увійдіть на сторінку налаштувань, виберіть вкладку розширення (Або просто введіть «chrome: // extensions» в адресний рядок). Обов'язково потрібно включити режим розробника. потім натисніть Завантажити розпаковане розширення ....
Виберіть папку, куди ви зберегли ці три файли. У моєму випадку це D: \\ Droopy \\ work \\ habr \\ plugin.
Розширення повинно з'явитися в списку. Увімкніть його.
Давайте перевіримо, як воно працює. Для цього зайдемо на vk.com, і виберемо розділ Мої аудіозаписи.
Так, нічого не працює ...
Чому? Тому що Вконтакте при переході зі сторінки на сторінку самостійно оновлює html і програмно змінює url в адресному рядку. Це не є класичним браузерні переходом зі сторінки на сторінку.
Тому браузер і не запустив наше розширення, хоча адреса сторінки і став «https://vk.com/audios*».
Для запуску нашого скрипта, нам потрібно явно оновити сторінку аудіозаписів.
Оновлюємо.
Але є одна складність з назвою скачується пісні. Коли ви натискаєте на посилання «Завантажити», в діалозі збереження файлу вам буде пропонуватися ім'я файлу з набору цифр. Нам же потрібно нормальне назву пісні.
Справа в тому, що вконтакте зберігає аудіозаписи на окремому домені, і хром для цього випадку буде використовувати ім'я файлу на сервері замість запропонованого на засланні.
У багтрекер хрому
У соціальній мережі vk.com можна знайти практично будь-які новинки кіно і музики. А також сотні тисяч фотографій, ілюстрацій і графічних зображень. Однак скачати з ВКонтакте непросто. Як відомо, в самій мережі такі можливості не передбачено. SaveFrom.net дозволить легко завантажити c ВКонтакте музику, відео і фотографії, використовуючи зручне доповнення для вашого браузера (Chrome, Firefox і інших).
Як завантажити музику
з ВК?
Після встановлення розширення відкрийте музику ВК і наведіть курсор мишки на назву треку. Поруч з тривалістю пісні з'явиться синя стрілка
- кнопка «Завантажити». Клацніть по ній, і музика скочується з ВКонтакте на ваш комп'ютер.
Якщо затримати курсор на кнопці протягом секунди, ви дізнаєтеся інформацію про розмір MP3 файлу і його якості (бітрейте). Бітрейт визначається за розміром файлу, тому значення є приблизними.
Як завантажити плейлист
з ВКонтакте?
Як завантажити відео
з ВКонтакте?
Завантажити відео з VK.com можна прямо зі сторінки перегляду, на яку після установки помічника додадуться прямі посилання для скачування в різній якості.
Як зберегти фото
з ВКонтакте?
Фотографії з ВК можна зберігати по одній, але якщо їх багато, це може зайняти значний час.
Після установки SaveFrom.net помічника, ви отримаєте можливість завантажувати вподобані альбоми з фотографіями цілком.
Для цього викличте меню SaveFrom.net помічника і виберіть пункт «Завантажити фотографії». Або використовуйте відповідне посилання на сторінці перегляду фотоальбому.
особливості функціоналу
- пошук і необмежену скачування мультимедійного контенту;
- прослуховування музики і перегляд відео, завдяки вбудованому багатофункціонального плеєра;
- можливість роботи в треї;
- відображення тексту пісень;
- можливість вибору якості викачуваного файлу;
- функція запам'ятовування пароля.
Що нового в останній версії
- виправлені помилки, присутні при завантаженні аудіо файлів;
- з'явилася можливість роботи програми без доступу до аккаунту;
- додана нова функція «Мої аудіозаписи».
Плюси і мінуси
Плюси утиліти:
- простий інтерфейс;
- регулярні автоматичні оновлення;
- безкоштовний доступ до програми;
- найпростіший, швидкий і зручний спосіб завантаження музики з мережі ВКонтакте.
Мінуси: не виявлені.
аналоги
Download Master - зручна програма для завантаження і пошуку будь-яких файлів в мережі. У ній можна зупиняти і відновлювати завантаження, легко управляти ними, розподіляти завантажені файли за типами. Вона працює з використанням протоколів HTTPS, FTP і HTTP, може відстежувати буфер обміну і перехоплювати посилання, володіє розширеним планувальником.
VKMusic - утиліта для простого і швидкого пошуку мультимедіа з його подальшою миттєвою завантаженням. У ній є онлайн-програвач, величезний каталог серіалів і мультфільмів. Завантажувати контент можна з будь-якого сервісу, єдину умову - наявність реєстрації на ньому.
USDownloader - додаток для скачування будь-яких даних з файлообмінних сервісів без перегляду реклами, довгого очікування і введення капч. Підтримує близько 120 сервісів, має функцію докачки файлів в разі розриву з'єднання.
Принципи роботи
VK-Downloader має простий і зрозумілий інтерфейс, який має три розділи:
- Аудіо
- Відео
- налаштування
Є можливість швидкого і зручного пошуку, як цікавить музичного треку:
Пошук музики
Так і будь-який відеозапису:
Пошук відео
Програма не вимагає обов'язкової авторизації ВКонтакте.
Для пошуку необхідного файлу потрібно просто ввести ім'я виконавця або назву треку (відео), і через кілька секунд додаток видасть знайдені результати у вигляді списку.
Для скачування просто відзначаємо файл, натискаємо на кнопку «Зберегти» і вибираємо шлях для збереження.
У правій частині вікна інтерфейсу можна побачити вбудований програвач, який дозволяє переглянути відео і прослухати музику.
Відео про роботу з програмою:
VK-Downloader дозволить швидко і просто завантажувати будь мультимедійний контент з соціальної мережі VK .com.
Я вирішив зробити добірку розширень для Google Chrome, які допоможуть користувачеві швидко завантажити музику, відео, отримати повідомлення про отримані повідомлення, вести чат з друзями, отримати оффлайн доступ до деяких даних (контакти, повідомлення). Всього в добірці 26 розширень і не всі я б використав. Перш за все пам'ятайте про безпеку. Найкраще використовувати ті розширення, які мають «зелену галочку». Це означає що дане розширення перевірено і схвалено. Але цього не особливо варто довіряти:) Так само не забувайте про те, що ВКонтакте не дає можливості скачувати музику і відео. Це роблять можливим різні надбудови, програми, плагіни, розширення і дополненія.Большінство зломів акаунтів В Контакте припадає саме на те, що користувачі довіряють свої дані (логін і пароль) різними програмами, які дозволяють завантажувати відео і аудіо матеріали на сайті.
Ніколи і ніде не вводьте свій логін і пароль від соціальної мережі. Сумлінні і порядні програми, доповнення, розширення повинні взаємодіяти з даними соціальної мережі через API. Якщо цього немає, то ви самостійно підвищуєте можливість крадіжки ваших персональних даних.
26 розширень для Google Chrome для Контакту
3. Вконтакте.ру Downloader - встановити
Це розширення для скачування музики і відео з VKontakte.ru / VK.com.
Розширення додає кнопки для скачування музики, і посилання для скачування відео.
Можна отримати розмір файлу і бітрейт для аудіозаписи, клікнувши на тривалості.
Для Chrome 15 і вище: Для скачування просто клікніть по посиланню або кнопці. Нормальні імена файлів працюють відразу і не вимагають ніяких налаштувань.
Для Chrome 14 і нижче:
Аудіозаписи викачуються простим кліком по кнопці; для скачування відеозапису клацніть правою кнопкою миші по посиланню, і виберіть пункт "Зберегти як ...» з контекстного меню.
Для Chrome 14 і нижче є два варіанти, як завантажувати з нормальним іменами:
1) перетягування кнопки / посилання в папку або на робочий стіл.
2) Менеджером завантажень Download Master (коли в настройках включена відповідна галочка).
Перший варіант часто краще, так як дозволяє використовувати кеш.
4. Тюряга ВКонтакте - встановити
У поточній версії розширення відображаються такі елементи:
1) Кликуха
2) Кількість Авторитету
3) В хаті якого боса сидить
4) Довжина бороди - скільки днів гравець не голився (як давно заходив в гру)
5) Загальна кількість вкладених очок талантів
+ Докладна інформація про Таланти (доступна при натисканні)
6) Загальна кількість набраних очок ДОСЯГНЕНЬ
+ Детальна інформація про кожне досягнення (доступна при натисканні)
7) Поточна кількість перемог над кожним босом
+ медалі
8) На своїй сторінці також показується поточний кількість ключів,
випали з кожного боса і не витрачених на наступного
Поділіться цікавим сайтом з вашими друзями Вконтакте.ру! Кожен раз, коли ви натискаєте на цю кнопку, на вашій сторінці ВКонтакте автоматично створюється запис з посиланням на поточну переглядається сторінку.
Vkfox - плагін для «В Контакте» (vkontakte.ru, vk.com), який показує і повідомляє про:
- приватних повідомленнях
- постах на стіні
- відмітках на фото
- відмітках на відео
- коментарі
- запрошеннях в друзі
- думках
- пропозиціях
- запрошеннях в групи
- запрошеннях на зустріч
- вхід / вихід друзів з мережі (вибераеться у вкладці друзі) * NEW
Ви також зможете відправляти повідомлення або коментарі прямо з плагіна, стежити за стрічкою новин або наприклад відзначати нові повідомлення, як прочитані без відвідування веб vkontakte.ru.
7. Плеєр музики ВКонтакте - встановити
Плеєр ваших аудіозаписів з ВКонтакте.Удобен, коли у вас постійно відкрито багато вкладок і довго шукати ту, в якій грає плеєр. А також в тих випадках, коли хочеться послухати музику, не відволікаючись на вкладку з ВКонтакте, яка магічним чином притягує увагу і зменшує продуктивність роботи.
НОРМАЛЬНИЙ показ фотографій і фото-мозайки в новинах. А так само створення фото-пазлів з будь-якої картинки в інтернеті.
У версії 1.53 тепер все фото-пазли в новинах сайту Вконтакте.ру - показуються правильно і складаються в мозайку.
Зручний пошук по соціальній мережі ВКонтакте.
Швидкий пошук в два кліка прямо з тулбара або виділений текст по правому кліку мишкою.
У новій версії:
- Результати пошуку відкриваються в окремому вікні відразу в самому сайті ВКонтакте
- Для зручності пошуку додано контекстне меню
- Підказки при пошуку з тулбару
10. Завантажити відео і музику Вконтакте - встановити
11. Чат ВКонтакте - встановити
Чат дозволяє швидко обмін повідомленнями в соціальній мережі ВКонтакте.
Просте додаток, яке допоможе Вам в спілкуванні з друзями!Увага: Це просто додаток-закладка на Миттєві повідомлення в соціальній мережі ВКонтакте. Вона дозволяє одним кліком відкрити чат ВКонтакте.
12. VKontakte Tools - встановити
Дозволяє скачувати музику, відео, перевірка нових повідомлень, чат, скроблінг музики на LastFm, моментальне відображення прийшов ...
- Дозволяє скачувати музику
- Скроблінг музики на LastFM
- Зміна стилів сайту
- Перевіряє нові повідомлення
- Звукове сповіщення про нові повідомлення
- Чат
- Збереження тексту при випадковому закриття вкладки
- Видалення дублікатів при пошуку музики
- Показ останнього повідомлення
- Notifications (показ повідомлень в правому нижньому кутку)
- Перегляд додаткової інформації про приховані профілях
- Додає кнопку пошуку тексту пісні
- Дозволяє завантажувати відео
- Розбиття груп порядково
13. Vkontakte Audio Player - встановити
Розширення додає іконку на панель інструментів, яка дозволяє управляти плеєром ВКонтакте, зокрема ставити на паузу і відтворювати поточну пісню.
15. Vkontakte Download- встановити
Дане розширення добаляет на сайт vkontakte.ru посилання на скачування відео і аудіо. Посилання на будь-яке відео і аудіо. При прокручуванні сторінки посилання на аудіо додаються автоматично.
16. Vkontakte Music Downloader - встановити
Дає можливість скачати музику на сторінках Вконтакте. vk.com, vkontakte.ru
17. Nonad VK —
VK оновили. Новий дизайн працює коректніше старої версії, та й зовнішній вигляд більш приємний. Мені особисто подобається - а вам? Але проблема в тому, що старі розширення для скачування музики з ВКонтакте, тепер не працюють. Довелося їх повністю знести і шукати щось новеньке. Таким «новеньким», стало безкоштовне розширення VK.COM Audios.
Розширення вже додано в магазин Google. Залишається тільки знайти і встановити його.
Установка розширення VK.COM Audios
Заходимо в магазин розширень Chrome:
Забиваємо в пошуковому рядку назву розширення - VK.COM Audios.
Можна додатково вказати, де шукати дане розширення (поставити галочку навпроти пункту «розширення»), хоча це не обов'язково.
Як правило, потрібне розширення перше в списку. Називається «Завантажити музику з Вконтакте (vk.com)», автор Anton P
Натиснути на кнопку " встановити».
Після установки в панелі інструментів браузера з'являється новий значок. Натисніть на значок, щоб активувати розширення.
Після активації VK.COM Audios в «контактовскіх» записах, крім значка Play. Повинен з'явитися ще один: «Play вниз». При натисканні на цей значок відбувається скачування музики з VK.
Якщо значок «скачування" не з'явився, поновіть сторінку.
Що мені додатково сподобалося в VK.COM Audios, так то, що при скачуванні розширення відображає дійсний назву пісні і групи в імені файлу. Коли як при роботі з іншими подібними розширеннями, замість імені відбивається набір цифр і букв.