在开发模式下，在本地主机上阻止Google广告

Question

I frequently have to update and test my small websites on my local machine. The websites use google ads.

I used to manually disable and enable the ads on each and every page and this is very painful.

I want to disable all the google ads while I am testing the website on my local machine. How do I achieve this?

Answer 1

After a few struggles, I found a basic solution to block all ads on localhost. The only limitation is that this has to be placed in master file and all the files inheriting the master file will have ads blocked.

Paste the below script in your master file in head section before including any other scripts.

    <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>

Answer 2

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

Answer 3

There are two ways, you can develop your own Chrome extension that runs only on your chrome to hide Google Ads (which by the way have unique set of HTML so it is easy to pin point them and remove them).

Or you can make a link to a javascript file in the main template, that is always empty on the server (production), but locally it defines the css for Google Ads to be hidden. Again, Google Ads selectors are not so hard to pin point.

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

Here is a plnkr code for that purpose

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);


});

remove.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

Answer 4

怎么样在配置文件中有一个标志，在本地进行开发/测试时可以在其中设置一个值。