Помощь с расширением для Google Chrome(MutationObserver)

215
30 сентября 2017, 23:53

Доброго времени суток.

Пишу простенькое расширение для Хрома(работа с ВКонтакте). Суть проста - добавить дополнительную кнопку на странице просмотра любой картинки(альбом, аватарка, пост и т.д.).
И вроде бы даже получилось, если бы не одно но - кнопка добавляется только тогда, когда я обновляю непосредственно саму страницу просмотра. Но если закрою её, а потом снова зайду, или же начну листать дальше картинки в альбоме - кнопка исчезает. Чтобы появилась, нужно снова обновить страницу.

Погуглил в инете, наткнулся на некий MutationObserver. Но я не совсем понимаю, как правильно им пользоваться. Были жалкие попытки, результат - вечный цикл и зависание браузера.
Так же видел пример в статье на Хабре, человек добавлял кнопку "скачать" к каждой аудиозаписи. Но я, к сожалению, ничего не понял, много трекеров каких-то. Мне не удалось разобраться в коде.

Буду признателен за любую помощь.

manifest.json

{
  "manifest_version": 2,
  "name": "SaveImageUrl",
  "description": "save image url",
  "version": "1.0",
  "content_scripts": [{
    "matches": ["*://vk.com/*"],
    "js": ["content.js"]
  }]
}  

content.js

window.onload = function () {
    var buttons = document.getElementsByClassName("pv_bottom_actions")[0];
    buttons.innerHTML = "<a href='#' id='my-btn'>Save URL</a><span class='divider'></span>" + buttons.innerHTML;
    var btn = document.getElementById("my-btn");
    btn.addEventListener("click", function () {
        alert("Success!");
    })
};

Так выглядит добавленная кнопка:

READ ALSO
Проверка resize однократно

Проверка resize однократно

Подскажите пожалуйста, как сделать чтобы проверка происходила однократно при переходе брейкпоинта, в одну и в другую сторонуТо-есть

211
Определение значений при resize и выполнение функции

Определение значений при resize и выполнение функции

Есть некий блок, например, меню или табы внутри страницыНеобходимо при прокрутке страницы, чтоб данный блок закрепился на экране, а при подъеме,...

184
Ссылка на fancybox из svg

Ссылка на fancybox из svg

Есть svg-файл со встроенными ссылками (xlink:href="url")Он подключен через <object> к index

234