1

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

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

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); 

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

4
  • чтобы всё работало при переходе в нужный раздел, нужно вызвать этот код при переходе в нужный раздел
    – user176262
    Commented 2 дек. 2021 в 16:46
  • как это сделать Commented 2 дек. 2021 в 16:48
  • не проще правилами AdBlock скрыть?
    – teran
    Commented 2 дек. 2021 в 17:43
  • adblock удаляет сразу же все элементы с этим классом, а мне нужно удалить отдельный Commented 2 дек. 2021 в 17:44

1 ответ 1

0

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

В простом варианте это делается с помощью 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 для этого класса.

9
  • проблема такая, что такой код удаляет все 3 блока .CatalogBlock--divided. Мне нужно чтобы удалился только первый из трёх Commented 2 дек. 2021 в 17:56
  • @SaintLaurentDon, не проще через стили .CatalogBlock--divided:first-child { display: none;? Commented 2 дек. 2021 в 18:00
  • @SaintLaurentDon Это не проблема, а недоработка скрипта с поиском блока. Я не пользуюсь ВК и не могу даже видеть как выглядит страница. Я лишь показал скелет скрипта в который следует дописать свое правило поиска этого конкретного блока. Если туда можно влезть без аккаунта, давай ссылку. Commented 2 дек. 2021 в 18:00
  • @SaintLaurentDon А вон уже OliverPatterson подсказал правильный селектор Commented 2 дек. 2021 в 18:01
  • @AlexanderLonberd но я не могу редактировать стили и html страницы Commented 2 дек. 2021 в 18:07

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.