Функция работает только при обновлении страницы

Question

Всем привет, я сделал расширение для хрома, чтобы удалять лишний дочерний блок контента ВК во вкладке "Музыка".

Но проблема в том, что он удаляется только при обновлении страницы

manifest.json

{
    "manifest_version": 2,
    "name": "Savage Mode",
    "description": "I'm in Savage Mode",
    "version": "1.0",
    "author": "twenty one savage",
    "browser_action": {
        "default_title": "Savage Mode",
        "default_icon": "icon.png"
    },
"content_scripts": [
{
    "matches": [
    "<all_urls>"
        ],
        "js" :["jquery.js", "content.js"]
}

]   
}

Javascript

var element = document.querySelector('.CatalogBlock--divided');
element.parentElement.removeChild(element);

Хотелось бы сделать так, чтобы всё работало при переходе в нужный раздел

Answer 1

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

В простом варианте это делается с помощью MutationObserver

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

// Найти самый ближайший родительский блок который никогда не удаляется
const root = document.querySelector('.CatalogBlock--divided')
  // У нас это будет class="main"
  .parentElement

// Простейшая функция поиска при обновлении родительского элемента
function update () {
  const bad = root.querySelector('.CatalogBlock--divided')
  if (!bad) return
  bad.remove()
  console.log('Удалили блок')
}

// Запустить на нем отслеживание дочерних элементов
new MutationObserver(update)
  .observe(root, { childList: true })

// +++ ВСЕ ЧТО НИЖЕ ЭТО ДЛЯ ТЕСТА +++

// Сперва скопируем
const bad = document.querySelector('.CatalogBlock--divided').cloneNode(true)

// Добавляем его каждые 2 сек - как буд-то это делает приложение сайта
setInterval(() => {
  if (root.querySelector('.CatalogBlock--divided')) return
  root.appendChild(bad.cloneNode(true))
  console.log('Добавили блок')
}, 2000)

// Удаляем впервые
setTimeout(update, 1000)

.main {
  padding: 10px;

}

.CatalogBlock--divided {
  width: 100px;
  height: 100px;
  background-color: red;
}

.other {
  width: 100px;
  height: 100px;
  background-color: #8bc34a;
}

<div class="main">
  <div class="other">Good</div>
  <div class="CatalogBlock--divided">Bad</div>
</div>

Этот вариант плох тем, что если родительский(фиксированный) блок окажется очень далеко, например это body, возрастет нагрузка на MutationObserver, но работать будет. Если же примерно как в данном примере - это фактически идеальный вариант.

Возможно проще внедрить стили с display: none для этого класса.

БЛОГ НА HUSL

Функция работает только при обновлении страницы

Ответы (1 шт):