删除新闻页面上的“关闭 adblock”广告包装

Question

我每天都在这个挪威新闻网站“www.vg.no”上阅读新闻。前几天，我在安装了 adblock 的学校计算机上阅读了它，我注意到广告已被删除，尽管弹出了一个广告包装器，上面写着“关闭 adblock 等”。当我在学校学习信息技术时，我决定将它作为一个附带项目来制作一个完全删除那些广告包装的 chrome 扩展。

我做了一个扩展并使用了一个 content_script，它在页面加载后调用一个脚本。我叫它script.js

所以当页面加载时，我的脚本就会运行。我的脚本如下所示：

var element = document.querySelector('div.ad-wrapper');
element.parentElement.removeChild(element);

这很好用，但后来我遇到了一个新问题。包装广告包装器的 div 会在每次页面加载时更改名称。我在网站上找到了一个脚本，它会在每次页面加载时随机化 div 类名。

看起来像这样：

<script>
window.__AB__ = function() {
    var dummy = Math.random().toString(36).replace(/[^a-z]+/g, '').substr(0, 5),
        css = dummy + '.' + dummy + '{' + 'display: block;' + 'position: absolute;' + 'top: 0;' + 'left: -180px;' + 'width: 180px;' + 'height: 700px;' + 'background: #19C url(//1.vgc.no/img/vgab.png) no-repeat bottom;' + 'color: #FFF;' + 'line-height: 1.4em;' + '}' + dummy + '.' + dummy + ' .t1 {' + 'padding: 260px 10px 67px;' + 'font-size: 18px;' + '}' + dummy + '.' + dummy + ' .t2 {' + 'padding: 0 451px 0 11px;' + 'margin: 0;' + 'font-size: 18px;' + '}' + dummy + '.' + dummy + ' h1 {' + 'margin: 0 0 16px;' + 'padding: 18px 11px 0;' + 'font-size: 26px;' + 'font-weight: normal;' + '}' + dummy + '.' + dummy + ' .zwei {' + 'padding: 11px 40px;' + 'position: absolute;' + 'right: 11px;' + 'top: 81px;' + 'background-color: #FFF;' + 'border: 1px solid #227196;' + 'color: #D00;' + 'font-size: 18px;' + 'text-transform: uppercase;' + '}' + dummy + '.' + dummy + ' button {' + 'padding: 11px 0;' + 'margin: 0 10px;' + 'background-color: #FFF;' + 'border: 1px solid #227196;' + 'color: #D00;' + 'font-size: 18px;' + 'text-align: center;' + 'font-weight: normal;' + 'width: auto;' + 'text-transform: uppercase;' + 'height: auto;' + 'line-height: 1.2em;' + '}' + '.tablet .reg-grid-main .ad[class*=smartboard], .desktop .reg-grid-main .ad[class*=smartboard], .tablet .reg-grid-main .ad[class*=netboard], .desktop .reg-grid-main .ad[class*=netboard] { min-height: auto; }',
        text = '<p class="t1"> Ved å skru på annonser, hjelper du å finansiere tidkrevende og viktig journalistikk. </p>',
        topText = ' <h1>Hei, kjære VG-leser!</h1><p class="t2">Vi har oppdaget at du blokkerer annonser. Vi i VG hadde satt stor pris på om du hvitlister oss slik at vi kan finansiere vår journalistikk med reklame og fortsette å være en gratis nyhetskilde.</p>',
        browser;
    if (navigator.userAgent.indexOf('Firefox') > -1 ? true : false) {
        browser = 'firefox';
    } else {
        browser = 'chrome';
    }
    var style = document.createElement('style');
    if (style.styleSheet) {
        style.styleSheet.cssText = css;
    } else {
        style.appendChild(document.createTextNode(css));
    }
    var left = document.createElement(dummy);
    left.className = dummy;
    left.innerHTML = '<!--googleoff: index-->' + text + '<!--googleon: index-->';
    var right = left.cloneNode(true);
    right.style.right = '-180px';
    right.style.left = 'auto';
    var topEl = right.cloneNode();
    topEl.style.position = 'relative';
    topEl.style.right = 'auto';
    topEl.style.width = '100%';
    topEl.style.height = '150px';
    topEl.style.marginTop = '-1px';
    topEl.style.backgroundImage = 'none';
    topEl.innerHTML = '<!--googleoff: index-->' + topText + '<!--googleon: index-->';
    var open = function(e) {
        var pop = document.createElement('div'),
            dim = 1000,
            over = document.createElement('div'),
            btn = document.createElement('a');

        function close(e) {
            e.preventDefault();
            btn.removeEventListener('click', close);
            pop.parentNode.removeChild(pop);
            over.parentNode.removeChild(over);
            return false;
        }
        btn.addEventListener('click', close);
        pop.style.cssText = 'width:' + dim + 'px; height: auto; position: absolute; top: 50%; left: 50%; background-color: #fff; padding: 10px; margin-left: -' + (dim / 2) + 'px; margin-top:-390px;z-index: 2000;';
        over.style.cssText = 'width: 100%; height: 100%; position: fixed; top: 0; left: 0; bottom: 0; right: 0; background-color: #000; z-index: 1999; opacity: .8;';
        over.addEventListener('click', close);
        var popText = '<h3>Slik skrur du på annonser</h3>';
        if (browser === 'chrome') {
            popText += '<div style="float: left; margin-right: 16px; padding-right: 16px; border-right: 2px solid #19C;"><p><strong>For Adblock</strong></p>';
            popText += '<img src="//1.vgc.no/ab/chrome-1.png"><br>';
            popText += '<img src="//1.vgc.no/ab/chrome-2.png"></div>';
            popText += '<p><strong>For Adblock Plus</strong></p>';
            popText += '<img src="//1.vgc.no/ab/chrome-plus.png">';
        } else if (browser === 'firefox') {
            popText += '<div style="text-align: center;"><p><strong>For Adblock Plus</strong></p>';
            popText += '<img src="//1.vgc.no/ab/firefox.png"></div>';
        }
        popText += '<div style="text-align: center; padding: 20px 0; clear: both;"><strong>Takk for at du skrur på annonser på VG.no :-)</strong></div>';
        pop.innerHTML = popText;
        btn.innerHTML = 'Lukk';
        btn.className = 'close';
        btn.href = '#';
        document.body.appendChild(pop);
        pop.appendChild(btn);
        document.body.appendChild(over);
        return false;
    };
    var topBoard = document.querySelector('#ad-topboard, #ad-front-topboard');
    if (topBoard) {
        topBoard.style.display = 'none';
    }
    var btn = document.createElement('button');
    btn.addEventListener('click', open);
    btn.className = 'action-click';
    btn.setAttribute('data-stats-type', 'exit');
    btn.setAttribute('data-stats-string', 'Adblock::OpenPopup');
    btn.innerHTML = 'Skru på annonser';
    left.appendChild(btn);
    var btn2 = btn.cloneNode(true);
    btn2.addEventListener('click', open);
    right.appendChild(btn2);
    var btn3 = btn.cloneNode(true);
    btn3.addEventListener('click', open);
    btn3.className = 'zwei';
    topEl.appendChild(btn3);
    document.head.appendChild(style);
    var con = document.querySelector('.reg-grid-container');
    con.appendChild(right);
    con.appendChild(left);
    if (con.insertAdjacentElement) {
        con.insertAdjacentElement('afterbegin', topEl);
    } else {
        con.insertBefore(topEl, con.firstChild)
    }
    if (window.xt_med) {
        window.xt_med('C', 0, 'Adblock::Enabled', 'N');
    }
    (window.dablockTrigger = window.dablockTrigger || []).push('survey');
    window.__AB__ = function() {};
};
</script>

基本上，他们正在创建一个名为 dummy 的变量并给它一个随机生成的名称。所以我在stackoverflow上向你提出的问题是，我怎样才能获得div的类名以便我可以删除它？我觉得可以将整个侧脚本转换为字符串，然后搜索虚拟变量，然后删除该脚本或其他什么？此外，在包装广告的 div 内，我看到了一段 <p class="t1">，我试图删除作为随机生成名称 div 的父级，但没有运气。有什么想法吗？

编辑：

我尝试在加载根 html 后调用 manifest.json 文件中的脚本，因此在创建 <head> 之前调用脚本，但是我在站点加载之前所做的任何更改很可能会在其余部分被覆盖的页面加载对吗？有没有办法制作不可编辑的功能？例如 testfunction = function(){} 然后在另一个脚本中，当他们尝试运行 testfunction = function(){var element = random} 他们不会覆盖已经声明的函数？

Answer 1

已经快 2 年了，但从那时起，我自学了 javascript + 一大堆更多的东西，并决定在这个项目上再做一次。基本上我花了不到 10 分钟的时间想出了一个解决方案，而且这个解决方案相当简单。

我只是完全忽略了他们的“虚拟”脚本并删除了容器 div 的前 3 个 div 子元素。这不是最好的解决方案，因为它有点硬编码。无论如何，它就像一个魅力。所以现在我有一个工作扩展：D

如果有人感兴趣，这里是简单的 .js 代码：

window.addEventListener("load", function(){
var topAdWrapper = document.querySelector(".reg-grid-container");

for(var i = 0; i < 6; i++)
{
    topAdWrapper.removeChild(topAdWrapper.childNodes[0]);
}

var body = document.querySelector("body");
body.style.backgroundImage = "";
});