Писане на разширение за Chrome „изтеглянеаудио записи от Vkontakte, част 2
Нека продължим да пишем нашето разширение за Chrome, което добавя връзка „Изтегляне“ за всеки аудиозапис на VKontakte. Последния път променихме нашата секцияМоите аудиозаписитака.
Както и преди, нашето разширение ще се състои от три файла - файл с описание (manifest.json), вграден js скрипт (vk_inject.js) и вграден файл със стил (vk_styles.css). Ето главния файл на разширението: manifest.json. Той съдържа дескриптор на разширение и връзки към вградени файлове.
Тагът „content_scripts“ в манифеста определя кои js и css файлове ще бъдат вградени в страницата. Нашето разширение ще вградиvk_inject.jsиvk_styles.cssфайлове във всяка страница на VKontakte — http://vk.com/* или https://vk.com/*.
Файлът със стилове (vk_styles.css) съдържа стиловете за вградената връзка. Връзката ще има css класdownloadLink. Трябва да се уверите, че класът не се припокрива със стиловете на оригиналната страница. Нека направим нашата връзка граница и осветяване при задържане. За разлика от първата версия, нека направим нашата връзка по-малка , така че да се побира в пространството, определено за песента по-често.
Всички основни действия на разширението ще се извършват в инжектирания код vk_inject.js. И така, какво ще правим:
За всяка песен в списъка с аудиозаписи ще внедрим връзка „Изтегляне“.
Ще търсим в страницата елементи с id 'pad_playlist', 'pad_search_list', 'initial_list', 'search_list', 'choose_audio_rows'. Това са списъците с аудиозаписи. Но всеки от елементите може да присъства първоначално на страницата и може да бъде динамично създаден/изтрит. Следователно трябва да следим добавянето на елементи къмDOM на страницата.
Нашият инжектиран скрипт работи в отделна виртуална машина и не може да взаимодейства със скрипта на страницата. Следователно не можем да заменим оригиналните функции или по друг начин да прихванем js кода на оригиналната страница. Но и двата скрипта споделят DOM дърво. Така че ще следим за актуализации на DOM на елементите на списъка, използвайки MutationObserver.
Инсталиране на разширението
Изберете папката, в която сте запазили тези три файла. В моя случай това е D:\Droopy\work\habr\plugin. Разширението трябва да се появи в списъка. Включи го.
Нека да проверим как работи. За да направите това, отидете на VKontakte, изберете секциятаМузикав горния панел.
Но, както казах в последния пост, има една трудност с името на изтеглената песен. Когато щракнете върху връзката "Изтегляне", в диалоговия прозорец за запис на файл ще ви бъде предложено не името на файла, което е посочено в атрибута "изтегляне", а името на файла на сървъра. Факт е, че VKontakte съхранява аудиозаписи в отделен домейн и chrome в този случай ще използва името на файла на сървъра вместо предложеното във връзката. Програмата за проследяване на грешки на Chromium казва, че в този случай трябва да изберетеЗапазване на връзката катов контекстното меню. След това ще бъдем подканени за нормалното име на аудиозаписа.
Тъй като е разопакован (т.е. в режим на разработка), всеки път, когато рестартирате браузъра, ще бъдете подканени да го деактивирате. По принцип е по-добре да направите това, но го включете, когато е необходимо, когато искате да изтегляте песни. Или можете да го изтеглите от уеб магазина на Chrome за постоянна употреба.
Можете да помогнете и да прехвърлите средства за развитието на сайта