Пишемо розширення для Chromeаудіозаписів з Вконтакте», частина 2
Продовжимо писати наше розширення для Chrome, яке додає посилання «Завантажити» для кожного аудіозапису вконтакті. Минулого разу ми змінювали наш розділМої Аудіозаписитак.
Як і раніше, наше розширення буде складатися з трьох файлів - файлу опису (manifest.json), впроваджуваного js скрипта (vk_inject.js), і файлу стилів (vk_styles.css). Ось головний файл розширення: manifest.json. У ньому міститься дескриптор розширення та посилання на файли, що впроваджуються.
Тег "content_scripts" у маніфесті визначає, які js та css файли будуть впроваджені в сторінку. Наше розширення буде вбудовувати файлиvk_inject.jsтаvk_styles.cssв кожну сторінку вконтакті - http://vk.com/* або https://vk.com/ *.
Файл стилів (vk_styles.css) містить стилі для посилання, що впроваджується. Посилання буде мати css класdownloadLink. Обов'язково слід стежити, щоб клас не перетинався зі стилями вихідної сторінки. Зробимо для нашого посилання border та підсвічування при наведенні. На відміну від першої версії, зробимо наше посилання менше, щоб воно частіше поміщалося в простір, визначений для пісні.
Всі основні дії розширення будуть відбуватися у коді 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. Розширення має з'явитися у списку. Увімкніть його.
Перевіримо, як воно працює. Для цього зайдемо у контакті, виберемо розділМузикау верхній панелі.
Але, як я вже казав у минулому пості, є одна складність з назвою пісні, що завантажується. Коли ви натискаєте на посилання "Завантажити", у діалозі збереження файлу вам буде пропонуватися не те ім'я файлу, яке було вказано в атрибуті "download", а ім'я файлу на сервері. Справа в тому, що вконтакті зберігає аудіозаписи на окремому домені, і хром для цього випадку використовуватиме ім'я файлу на сервері замість запропонованого посилання. У багтрекері хрому сказано, що в цьому випадку потрібно вибирати пунктЗберегти посилання яку контекстному меню. Тоді нам буде запропоновано нормальне ім'я аудіозапису.
Так як воно розпаковане (тобто в режимі розробки), при кожному перезапуску браузера пропонуватиметься відключити його. В принципі, так краще і зробити, а включати його за потребою, коли захочете завантажити пісні. Або можна завантажити його в Chrome веб-сторінку, щоб використовувати постійно.
Ви можете допомогти і перевести небагато коштів на розвиток сайту