For tracking, security, and analytics reasons, ad providers almost always originate ads from a separate domain than the content provider's.

My ideal ad-blocking solution turns the popover, popunder, rollover-expanding, shouting at the top of their heads to get your attention advertisements into something as innocuous as that 'nasty' gray ad. I don't have a problem trading my eyeballs for a product, but I do have a problem when your ad takes over my browser, makes the page unusable, or is generally a pain in the ass.

Of course, my fix there isn't to use an adblocker, it's just to block the site altogether.

  var removeGrayImage = function() {
	$("img").each(function(idx, el) {
		var canvas = $("<canvas/>")[0];
		canvas.width = el.width;
		canvas.height = el.height;
		canvas.getContext("2d").drawImage(el, 0, 0, el.width, el.height);
		var pixel = canvas.getContext("2d").getImageData(1, 1, 1, 1);
		var r = pixel.data[0];
		var g = pixel.data[1];
		var b = pixel.data[2];
		if(r == 183 && g == 183 && b == 183) {
			$(el).css({opacity: 0});
		}
	});
  };

Here's my equivalent solution:

  var canvas = document.createElement('canvas');
  canvas.height = 1;
  canvas.width = 1;
  var twodctx = canvas.getContext('2d');
  var blockImg = null;
  var qs = document.querySelectorAll('img');
  for (var i = 0; i < qs.length; i++) {
    var img = qs[i];
    twodctx.drawImage(img, 0, 0, 1, 1);
    var imgd = twodctx.getImageData(0,0,1,1);
    if (imgd.data[0] == imgd.data[1] && imgd.data[0] == imgd.data[2] && imgd.data[3] == 255) {
      var badDiv = document.createElement('div');
      badDiv.style.display = 'none';
      document.body.appendChild(badDiv);
      badDiv.appendChild(img.parentNode.removeChild(img));
      break;
    }
  }

    var removeImageByHash = function() {
        var bad = [525994816];
        var canvas = document.createElement('canvas');
        var ctx = canvas.getContext("2d");
        var imgs = document.querySelectorAll('img');

        for( var idx = 0; idx < imgs.length; idx++ ) {
            var el = imgs[idx];

            canvas.width = el.width;
            canvas.height = el.height;
            ctx.drawImage(el, 0, 0, el.width, el.height);

            var hash = 0;
            for( var i = 0; i < el.width; i++ ) {
                for( var j = 0; j < el.height; j++ ) {
                    var pixel = ctx.getImageData(1, 1, 1, 1);

                    hash = ((hash << 5) - hash) + pixel.data[0];
                    hash |= 0;
                    hash = ((hash << 5) - hash) + pixel.data[1];
                    hash |= 0;
                    hash = ((hash << 5) - hash) + pixel.data[2];
                    hash |= 0;
                }
            }

            var found = false;
            for( var i = 0; i < bad.length; i++ ) {
                if( bad[i] === hash ) {
                    found = true;
                    break;
                }
            }

            if( found ) {
                var hidden = document.createElement('div');
                hidden.style.display = 'none';
                hidden.style.width = 0;
                hidden.style.height = 0;

                document.body.appendChild(hidden);
                hidden.appendChild(el.parentNode.removeChild(el));
            }

            console.log(idx + ": " + hash);
        }
      };

    style="height: 250px; width: 250px;"

You could modify the script to randomly place the ad either first or second, so you don't need the third <img> tag with no src.

What is the goal of this experiment?

I'm guessing intern at an ad network pitches he can come up with an "unblockable ad" to his boss.

Boss wants to go home for the holiday weekend so he says, "OK, whatever kid" as he's walking out the door just after lunch.

Intern signs up with a one-hour old HN account and posts his masterpiece here and starts playing whack-a-mole with the dozens of methods to trivially block the "unblockable ad".

After a couple hours, everyone gets bored and goes back to work. The intern frets and worries all weekend that he promised his boss an unblockable ad and won't be able to deliver on Tuesday when everyone is back in the office. Come Tuesday, he goes into the office, sweating and nervous to discover his boss wasn't in the slightest bit paying attention to whatever it was he was saying last Friday.

Sorry if you didn't like it.

    var found = false;
    $('img').each(function(i, elem) {
        var e = $(elem);
        if( e.attr('src') !== '' && !found ) {
            e.attr("style","opacity:0.0;");
            found = true;
        }
    });

Victory?

Not to mention, if I encountered this on a real page I would just leave...

  // First clear the interval assigned to window
  var highestTimeoutId = setTimeout(";");
  for (var i = 0 ; i < highestTimeoutId ; i++) {
      clearTimeout(i); 
  }
  // Then empty the script tag
  $('script').eq(3).empty();
  // Then hide the image;
  $('img[src^="img"]').eq(0).hide();

0x1b.pw##IMG:first-child

But I imagine you could work around this by adding a null IMG element before the ad. Also, I'm pretty sure this would break any non-toy page.

[1]: https://addons.mozilla.org/en-US/firefox/addon/elemhidehelpe...

Of course reloading the page will bring it back due to way it's done, I guess that's supposed be the challenging part.

$('img[src^="img"]').eq(0).css("max-height", "0");