CODEWITHSUNDEEP
javascriptgoogle-chromegoogle-chrome-extensionbrowser-extension
miko
miko

Reputation: 129

Patch DOM after ads remotion - chrome extension

I've created a simple adblocker for google chrome and I'm testing it. It seems working correctly and will block using webRequest all the ads that are in easylist filters.

I'm looking for a way to "patch" the DOM web pages when a blank space is left from a removed ads. Since it's impossible to predict what will be the css ids and classes of these banners, I would ask if there is a way to achive this. I've seen that on the easylist repo are available some lists of filters that will reference to DOM classes and ids but I don't know how to parse them to use inside the extension, can someone suggest me how to proceed please?

I want to use regex but the needed values will be lost after the .replace() js function. Here is how the list looks like:

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

to see how is structured the list here is the link

Thank you for the help.

Upvotes: 0

Views: 100

Answers (1)

Reyno
Reyno

Reputation: 6525

If you want to parse the whole list on the REPO you can do the following.

  1. Get data into an array.
  2. Remove every line that starts with an !
  3. Remove first two characters from string ##
  4. Get all the DOM elements based on the selector
  5. Do whatever you want with them...

PS if you don't request the list but save it inside the extension you could just do this before hand so you don't need to parse this through code everytime. Just save the parsed version inside the extension.

const data = [
  '##div[class^="backfill-taboola-home-slot-"]',
  '! Tripadvisor',
  '###MAIN.ShowTopic > .ad',
  '! uCoz',
  '! https://adblockplus.org/forum/viewtopic.php?f=2&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>

Upvotes: 1

Related Questions