Исправление DOM после удаления рекламы - расширение Chrome

ProgramBox

Исправление DOM после удаления рекламы — расширение Chrome

Post author:admin
Запись опубликована:28 марта, 2023
Post category:Вопросы по программированию

#javascript #google-chrome #google-chrome-extension #browser-extension

#javascript #google-chrome #google-chrome-extension #расширение для браузера

Вопрос:

Я создал простой блокировщик рекламы для Google Chrome и тестирую его. Кажется, он работает правильно и блокирует использование webRequest всех объявлений, которые находятся в фильтрах easylist.

Я ищу способ «исправить» веб-страницы DOM, когда после удаления рекламы остается пустое место. Поскольку невозможно предсказать, какими будут идентификаторы css и классы этих баннеров, я хотел бы спросить, есть ли способ достичь этого. Я видел, что в репозитории easylist доступны некоторые списки фильтров, которые будут ссылаться на классы и идентификаторы DOM, но я не знаю, как их проанализировать для использования внутри расширения, может кто-нибудь подсказать мне, как поступить, пожалуйста?

Я хочу использовать регулярное выражение, но необходимые значения будут потеряны после .replace() функции js. Вот как выглядит список:

 ###zoneAdserverSuper
###zoneAdvertisment
###zone_a_ad
###zone_b_ad
###zone_c_ads
###zztextad
##.AD-POST
##.AD-RC-300x250
##.AD-Rotate
##.AD-label300x250
##.AD300
##.AD300Block
##.AD300x250

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

Спасибо вам за помощь.

1. Вам придется сделать это вручную в скрипте содержимого. Возможно, было бы проще переключиться на declarativeNetRequest, который автоматически сворачивает пустые заполнители (хотя и не всегда).

2. Можете ли вы показать нам фрагмент кода того, что вы пробовали?

3. Я уже тестировал declarativeNetRequest , и это немного сложно поддерживать, потому что внутри статических .json файлов должны быть определены правила, а также с помощью функции динамического обновления, предоставляемой api, обработка списка требует большого количества регулярных выражений и сопоставления. Этот API еще не созрел, и в документации отсутствуют примеры обновления правил.

4. @Reyno На данный момент у меня не было никакого кода для этого. вот почему я прошу несколько советов о том, как действовать дальше.

5. API declarativeNetRequest уже достаточно зрелый, он существенно не изменится. Сопоставление не должно быть проблемой. В любом случае, для WebRequest есть хитрость: вы можете перенаправлять ресурсы на 'data:text/plain,' URL вместо их отмены, так что объявления будут сворачиваться без явной ширины / высоты.

Ответ №1:

Если вы хотите проанализировать весь список в репозитории, вы можете сделать следующее.

Получить данные в массив.
Удалите все строки, начинающиеся с !
Удалите первые два символа из строки ##
Получите все элементы DOM на основе селектора
Делайте с ними все, что хотите…

PS если вы не запрашиваете список, но сохраняете его внутри расширения, вы могли бы просто сделать это заранее, чтобы вам не нужно было каждый раз разбирать это с помощью кода. Просто сохраните обработанную версию внутри расширения.

 const data = [
  '##div[class^="backfill-taboola-home-slot-"]',
  '! Tripadvisor',
  '###MAIN.ShowTopic > .ad',
  '! uCoz',
  '! https://adblockplus.org/forum/viewtopic.php?f=2amp;t=13414',
  '##div[id^="mainads"]',
  '! yavli.com Sponsored content',
  '##.__y_elastic .__y_item',
  '##.__y_inner > .__y_item',
  '##.__y_outer',
  '##.__yinit .__y_item',
  '##.__ywl .__y_item',
  '##.__ywvr .__y_item',
  '##.__zinit .__y_item',
  '##.icons-rss-feed   .icons-rss-feed div[class$="_item"]',
  '##.inlineNewsletterSubscription   .inlineNewsletterSubscription div[class$="_item"]',
  '##.jobs-information-call-to-action   .jobs-information-call-to-action div[class$="_item"]',
  '! Zergnet',
  '###boxes-box-zergnet_module',
  '###right_rail-zergnet',
  '###zergnet',
  '###zergnet-wrapper',
  '##.ZERGNET',
];

const combined = data.filter((selector) => !selector.startsWith("!")).map((selector) => {
  const domSelector = selector.slice(2, selector.length);
  return domSelector ? [...document.querySelectorAll(domSelector)] : [];
}).flat();

console.log(combined);

 <div class="backfill-taboola-home-slot-five">FAKE AD</div>

<div class="header">NOT AN AD</div>

<div class="__y_elastic">
  <div class="__y_item">FAKE AD</div>
</div>

<div class="footer">NOT AN AD</div>

<div id="zergnet-wrapper">FAKE AD</div>

1. спасибо за предложение, мне нужно попробовать. Есть ли у вас какие-либо предложения по declarativeNetrequest поводу того, хочу ли я сопоставить список фильтров для динамического обновления правил?

2. Я не очень хорошо знаком с declarativeNetRequest (пока), поэтому я действительно не могу вам здесь помочь. Хотя я знаю, что есть пакет , который преобразует список AdBlock в список declarativeNetrequest, так что, возможно, это может вам помочь

3. Я знаю этот пакет, я использовал его для создания правил, которые я тестировал с помощью api, но это не очень полезно, потому что набор правил необходимо обновлять каждый раз, когда обновляется easylist. в любом случае спасибо за помощь

4. Я получаю эту ошибку при запуске скрипта Uncaught (in promise) DOMException: Failed to execute 'querySelectorAll' on 'Document': The provided selector is empty. Вы уверены, что я могу использовать querySelectorAll таким образом?

5. Кажется, что в списке есть несколько пустых селекторов, я обновил фрагмент, чтобы проверить их наличие. Сейчас должно сработать, мой локальный тест работает.