时间戳

首页 > 解决方案 > 广告移除后修补 DOM - chrome 扩展

javascript - 广告移除后修补 DOM - chrome 扩展

问题描述

我为谷歌浏览器创建了一个简单的广告拦截器，我正在对其进行测试。它似乎工作正常，并且会阻止使用webRequesteasylist 过滤器中的所有广告。

当删除的广告留下空白时，我正在寻找一种“修补”DOM网页的方法。由于无法预测这些横幅的 css id 和类是什么，我想问是否有办法实现这一点。我已经看到在easylist repo 上有一些过滤器列表将引用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

看看这个列表的结构是链接

感谢您的帮助。

标签： javascriptgoogle-chromegoogle-chrome-extensionbrowser-extension

解决方案

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

  1. 将数据放入数组。
  2. 删除以 a 开头的每一行!
  3. 从字符串中删除前两个字符##
  4. 根据选择器获取所有 DOM 元素
  5. 对他们做任何你想做的事...

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>

推荐阅读