4 ms·

I challenge you to remove the gray ad using Adblock

16 points by ryanskidmore 13y ago

Piskvorrr 13y ago
Is Adblock a requirement? Opera has built-in element blocking: I clicked "Block elements", clicked the "ad", clicked "Done," and ... done :)
- ryanskidmore 13y ago
  Hm, tried it with Opera and it is indeed blocking it. However, the image still shows when the page is reloaded. So eh, kinda works.
  - Piskvorrr 13y ago
    Interesting...it indeed shows up on reload.
sp332 13y ago
Can I use other extensions? It's dead simple with Remove It Permanantly. https://addons.mozilla.org/en-US/firefox/addon/remove-it-permanently https://addons.mozilla.org/en-US/firefox/addon/remove-it-per...
- ryanskidmore 13y ago
  Go for it, i've only tested it using Adblock. I'll test out Remove it Permanently and see if I can come up with some sort of anti for it ;)
- ryanskidmore 13y ago
  Updated, try again.
  - sp332 13y ago
    Yeah, I have no idea now. Nice job :)
nsp 13y ago
$($("img")[0]).attr("style","position: absolute; left: -10000px;")
- ryanskidmore 13y ago
  Updated, try again ;)
  - StavrosK 13y ago
    Sorry, you don't get to work around successes every time someone posts one in order to claim that nobody can do it. The GP did it, the challenge has been won.
    - larrik 13y ago
      You don't get a prize, he's working WITH HN on an experiment.
      - StavrosK 13y ago
        I know you don't get a prize, but a challenge is one specific thing. This is a new challenge now.
    - freehunter 13y ago
      He's not denying that the challenge was met, he's setting another challenge on top of that. It's like reverse Ruby Koans. You don't complete the first challenge then declare your learning done, the challenge keeps building.
    - hamburglar 13y ago
      STOP HAVING FUN. THE FUN IS OVER.
Morphling 13y ago
ermm? Just right click the image, adblock -> remove this image. Of course reloading the page will bring it back due to way it's done, I guess that's supposed be the challenging part.
- ryanskidmore 13y ago
  Indeed, from a content creator standpoint - I wouldn't care if the image got removed after you'd seen it since I would of already got the impression.
Pinckney 13y ago
With the element hiding extension[1] installed: 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/elemhidehelper/ https://addons.mozilla.org/en-US/firefox/addon/elemhidehelpe...
- ryanskidmore 13y ago
  Updated, not the cleanest way to do it but indeed adding a dummy image as the first child should stop it.
  - jerf 13y ago
    This is an arms race situation. The winner is simply the last one to move. I'm not sure exactly what you're trying to implicitly say, but it was already pretty clear that the whole ad removal thing was an arms race. It's obvious that neither side can Win Forever.
otterley 13y ago
This is a pointless challenge, because it has none of the characteristics of an actual ad. For tracking, security, and analytics reasons, ad providers almost always originate ads from a separate domain than the content provider's.
- ryanskidmore 13y ago
  Correct, it isn't supposed to be used with ad providers that Adblock may (or may not) already block, it's supposed to work with internal ads that would come from the same domain as the content providers.
  - otterley 13y ago
    Who does that, though? Even the big content providers that have their own ad platforms (e.g. Yahoo!) serve ads from separate domains.
- bmelton 13y ago
  Moreover, if the gray ad were representative of the state of advertising on the internet, I highly suspect that less people would spend too much effort in blocking advertisements. 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.
danlash 13y ago
height: 0;
charlieirish 13y ago
This works assuming assuming OP doesn't change the page again: // 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();
- ryanskidmore 13y ago
  Very good solution, well done.
phogster 13y ago
I'm not sure how I feel about helping OP create un-blockable ads.
_mc 13y ago
$('img')[1].hidden = true;
eevee 13y ago
Block both, wonder why the site has nothing on it, leave.
pothibo 13y ago
$("div > img:nth-child(2)").get(0).src = "http://dev.w3.org/2007/mobileok-ref/test/data/ROOT/GraphicsForSpacingTest/1/largeTransparent.gif"; http://dev.w3.org/2007/mobileok-ref/test/data/ROOT/GraphicsF... Victory?
betterunix 13y ago
The point of ad blocking is not to block all ads, just to block the most atrociously annoying and privacy invading ones. If the end game is that advertisers all calm down and stick to static images that do not double as web bugs we will all be happy.
jlarocco 13y ago
If I'm going through the effort to block an ad it's safe to assume I'm not going to click through, so you're doing a lot of work to not get a click. Not to mention, if I encountered this on a real page I would just leave...
barranger 13y ago
seems you check for height being zero, but not max-height $('img[src^="img"]').eq(0).css("max-height", "0");
someone13 13y ago
Probably trivial to fix, but: var found = false; $('img').each(function(i, elem) { var e = $(elem); if( e.attr('src') !== '' && !found ) { e.attr("style","opacity:0.0;"); found = true; } });
themstheones 13y ago
Why would you even want to block ad blocking? That's like trying to control what someone else can do with their computer. It seems really unethical.
mark242 13y ago
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}); } }); };
- lukegb 13y ago
  Damn, you went for the same solution as me. I didn't think anyone else would so obtuse as to use a canvas to access the raw image data. 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; } }
- someone13 13y ago
  I took yours and lukegb's a bit further - thanks for the inspiration. Probably overkill, though :-P 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); } };
just2n 13y ago
It still has a style that the other image doesn't: style="height: 250px; width: 250px;" After that, other than positionally blocking them, there's nothing that can be done short of visually inspecting the element. 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?
- 300bps 13y ago
  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.
  - ryanskidmore 13y ago
    Thats a nice story, but unfortunately not the truth. This was simply a spur of the moment idea and I wanted to see if it worked, which to a relative degree it did, hence why I posted it. The main goal of posting it is to show how easy it would be for a website to show ads to a user, even with an extension such as Adblock enabled. In regards to the account, I haven't had a need for a HN account before now. Sorry if you didn't like it.
jdc 13y ago
$('img:first').replaceWith(function() { return $('<div id=' + this.id + '></div>') })
meow12 13y ago
Easy Greeezy
krisgee 13y ago
If a site did this I'd just leave tbh. I turn everything off and opt into advertising on sites I find I enjoy (if it turns out those sites had bad ads I just turn them off again).

16 points by ryanskidmore 13y ago

Is Adblock a requirement? Opera has built-in element blocking: I clicked "Block elements", clicked the "ad", clicked "Done," and ... done :)

ryanskidmore 13y ago
Hm, tried it with Opera and it is indeed blocking it. However, the image still shows when the page is reloaded. So eh, kinda works.
- Piskvorrr 13y ago
  Interesting...it indeed shows up on reload.

sp332 13y ago

Can I use other extensions? It's dead simple with Remove It Permanantly. https://addons.mozilla.org/en-US/firefox/addon/remove-it-permanently https://addons.mozilla.org/en-US/firefox/addon/remove-it-per...

ryanskidmore 13y ago
Go for it, i've only tested it using Adblock. I'll test out Remove it Permanently and see if I can come up with some sort of anti for it ;)
ryanskidmore 13y ago
Updated, try again.
- sp332 13y ago
  Yeah, I have no idea now. Nice job :)

nsp 13y ago

$($("img")[0]).attr("style","position: absolute; left: -10000px;")

ryanskidmore 13y ago
Updated, try again ;)
- StavrosK 13y ago
  Sorry, you don't get to work around successes every time someone posts one in order to claim that nobody can do it. The GP did it, the challenge has been won.
  - larrik 13y ago
    You don't get a prize, he's working WITH HN on an experiment.
    - StavrosK 13y ago
      I know you don't get a prize, but a challenge is one specific thing. This is a new challenge now.
  - freehunter 13y ago
    He's not denying that the challenge was met, he's setting another challenge on top of that. It's like reverse Ruby Koans. You don't complete the first challenge then declare your learning done, the challenge keeps building.
  - hamburglar 13y ago
    STOP HAVING FUN. THE FUN IS OVER.

Morphling 13y ago

ermm? Just right click the image, adblock -> remove this image. Of course reloading the page will bring it back due to way it's done, I guess that's supposed be the challenging part.

ryanskidmore 13y ago
Indeed, from a content creator standpoint - I wouldn't care if the image got removed after you'd seen it since I would of already got the impression.

Pinckney 13y ago

With the element hiding extension[1] installed: 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/elemhidehelper/ https://addons.mozilla.org/en-US/firefox/addon/elemhidehelpe...

ryanskidmore 13y ago
Updated, not the cleanest way to do it but indeed adding a dummy image as the first child should stop it.
- jerf 13y ago
  This is an arms race situation. The winner is simply the last one to move. I'm not sure exactly what you're trying to implicitly say, but it was already pretty clear that the whole ad removal thing was an arms race. It's obvious that neither side can Win Forever.

otterley 13y ago

This is a pointless challenge, because it has none of the characteristics of an actual ad. For tracking, security, and analytics reasons, ad providers almost always originate ads from a separate domain than the content provider's.

ryanskidmore 13y ago
Correct, it isn't supposed to be used with ad providers that Adblock may (or may not) already block, it's supposed to work with internal ads that would come from the same domain as the content providers.
- otterley 13y ago
  Who does that, though? Even the big content providers that have their own ad platforms (e.g. Yahoo!) serve ads from separate domains.
bmelton 13y ago
Moreover, if the gray ad were representative of the state of advertising on the internet, I highly suspect that less people would spend too much effort in blocking advertisements. 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.

danlash 13y ago

height: 0;

charlieirish 13y ago

This works assuming assuming OP doesn't change the page again: // 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();

ryanskidmore 13y ago
Very good solution, well done.

phogster 13y ago

I'm not sure how I feel about helping OP create un-blockable ads.

_mc 13y ago

$('img')[1].hidden = true;

eevee 13y ago

Block both, wonder why the site has nothing on it, leave.

pothibo 13y ago

$("div > img:nth-child(2)").get(0).src = "http://dev.w3.org/2007/mobileok-ref/test/data/ROOT/GraphicsForSpacingTest/1/largeTransparent.gif"; http://dev.w3.org/2007/mobileok-ref/test/data/ROOT/GraphicsF... Victory?

betterunix 13y ago

The point of ad blocking is not to block all ads, just to block the most atrociously annoying and privacy invading ones. If the end game is that advertisers all calm down and stick to static images that do not double as web bugs we will all be happy.

jlarocco 13y ago

If I'm going through the effort to block an ad it's safe to assume I'm not going to click through, so you're doing a lot of work to not get a click. Not to mention, if I encountered this on a real page I would just leave...

barranger 13y ago

seems you check for height being zero, but not max-height $('img[src^="img"]').eq(0).css("max-height", "0");

someone13 13y ago

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

themstheones 13y ago

Why would you even want to block ad blocking? That's like trying to control what someone else can do with their computer. It seems really unethical.

mark242 13y ago

lukegb 13y ago
Damn, you went for the same solution as me. I didn't think anyone else would so obtuse as to use a canvas to access the raw image data. 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; } }
someone13 13y ago
I took yours and lukegb's a bit further - thanks for the inspiration. Probably overkill, though :-P 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); } };

just2n 13y ago

It still has a style that the other image doesn't: style="height: 250px; width: 250px;" After that, other than positionally blocking them, there's nothing that can be done short of visually inspecting the element. 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?

300bps 13y ago
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.
- ryanskidmore 13y ago
  Thats a nice story, but unfortunately not the truth. This was simply a spur of the moment idea and I wanted to see if it worked, which to a relative degree it did, hence why I posted it. The main goal of posting it is to show how easy it would be for a website to show ads to a user, even with an extension such as Adblock enabled. In regards to the account, I haven't had a need for a HN account before now. Sorry if you didn't like it.

jdc 13y ago

$('img:first').replaceWith(function() { return $('<div id=' + this.id + '></div>') })

meow12 13y ago

Easy Greeezy

krisgee 13y ago

If a site did this I'd just leave tbh. I turn everything off and opt into advertising on sites I find I enjoy (if it turns out those sites had bad ads I just turn them off again).