在开发模式下屏蔽本地主机上的谷歌广告

本文关键字：谷歌 主机 模式 开发 屏蔽 | 更新日期: 2024-10-21 16:33:52

我经常需要在本地机器上更新和测试我的小型网站。这些网站使用谷歌广告。

我曾经手动禁用和启用每个页面上的广告，这非常痛苦。

当我在本地机器上测试网站时，我想禁用所有的谷歌广告。我该如何做到这一点？

在开发模式下屏蔽本地主机上的谷歌广告

经过几次努力，我找到了一个基本的解决方案来阻止localhost上的所有广告。唯一的限制是必须将其放置在master文件中，并且所有继承主文件的文件都将阻止广告。

在包含任何其他脚本之前，请将以下脚本粘贴到head部分的master文件中。

    <script type="text/javascript">
        //block google ads on localhost
        if (window.location.hostname === "localhost") {
            window.adsbygoogle = {
                enabled: true,
                loaded: true,
                push: function () {
                    return;
                },
                google_ad_client: "",
                enable_page_level_ads: true
            }
        }
    </script>

您可以使用adblocker在本地主机上工作时启用它，然后在发布网站时禁用它。

有两种方法，你可以开发自己的Chrome扩展，它只在你的Chrome上运行，以隐藏谷歌广告（顺便说一句，它们有一组独特的HTML，所以很容易定位并删除它们）。

或者，您可以在主模板中创建一个指向javascript文件的链接，该文件在服务器（生产版）上始终为空，但在本地它定义了要隐藏的谷歌广告的css。同样，谷歌广告的选择者也不那么难确定。

https://developer.chrome.com/extensions/getstarted

这是一个用于此目的的plnkr代码

manifest.json

http://plnkr.co/edit/wPxuO0vndIBMTz1ajMyJ?p=preview
{
  "name": "Walnut",
  "description": "hide ads",
  "version": "2.0",
 "content_scripts": [
    {
      "matches": ["https://*.facebook.com/*","http://localhost:8080/*"],
        "css": [ "remove.css" ],
        "js": ["remove.js"],
      "run_at": "document_start"
    }
  ],
  "manifest_version": 2
}

remove.js

// you can also make the removal periodical in case the Ad provider keeps recreating itself
// here you can have more freedon to find elements that main contain certain part of a class name or id
document.addEventListener('DOMContentLoaded', function () {
    var all = document.getElementsByTagName("*");
    for (var i=0, max=all.length; i < max; i++) {
      // check id and hide if it matches google-ad-*
    }
    setTimeout(function () {
        var ads = document.getElementsByClassName("example-suspected-class");

        if (ads.length == 1) {
            ads[0].remove();
        }
    }, 100);
    setInterval(function () {
        var ads = document.getElementsByClassName("example-suspected-class");
        if (ads.length == 1) {
            ads[0].remove();
        }
    },10000);

});

删除.css

/* setup any css you susspect would mean something to web page, examples */
#slot_TL1 {display: none!important;}
.vp-off .mb-list-ad {display: none!important;}
.vp-off .mb-list-ad * {display: none!important;}

http://plnkr.co/edit/wPxuO0vndIBMTz1ajMyJ?p=preview

在配置文件中有一个标志，当您在本地开发/测试时，您可以在其中设置一个值。

相关文章：