广告删除后修补DOM-chrome扩展程序

问题描述

我已经为Google chrome创建了一个简单的adblocker，并且正在对其进行测试。它似乎正常运行，并且会使用webRequest阻止easylist过滤器中的所有广告。

我正在寻找一种方法，当已删除的广告中留有空白时，可以“修补” DOM网页。由于无法预测这些横幅的css id和类，因此我想问是否有办法实现这一目标。我已经看到，在easylist仓库中可以找到一些过滤器列表，这些过滤器列表将引用DOM类和id，但是我不知道如何解析它们以在扩展程序中使用，有人可以建议我如何继续吗？>

我想使用正则表达式，但是在.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

查看列表here is the link

的结构

谢谢您的帮助。

解决方法

如果您想解析REPO上的整个列表，则可以执行以下操作。

将数据放入数组。
删除以!开头的每一行
从字符串##中删除前两个字符
基于选择器获取所有DOM元素
与他们一起做任何您想做的事...

PS，如果您不请求列表，而是将其保存在扩展名中，则可以事先进行此操作，因此无需每次都通过代码来解析它。只需将解析后的版本保存在扩展程序中即可。

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>

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