Summary
On the release of our new tool a div with some advertisement previews would not display in every browser. Even though the browser versions of me an my colleague were exactly the same. After some (a long time) debugging we managed to find the causing Chrome plugin.
Down below you can read the whole story. I marked this as Q&A style so don't bother even to think about a possible answer, because I have it for you :). I am posting this here because I don't have a blog (yet) and I want to share it! I hope we can help you or you colleague-programmers with the same (similar) problem.
Problem
Today we were releasing a new tool on our internal CRM application which creates advertisements based on data provided by the employee and our customers. This tool has the ability to show some (5) of these advertisements before exporting them all. This preview is done through an Ajax call which will create the ads with the data provided. I developed this tool on localhost, uploaded it to the test server and everything was working great. At several computers/browsers with several different users everything was working fine. Time to release this stuff.
We uploaded the files to the server, added the different database tables and made ourselves the only users who were allowed to visit the page for some final checks. I did some checks on my computer (Win 7 with Chrome) and everything worked just like on localhost and the test server as it had to. A colleague of mine who is head of development was trying to use the tool as well. It works great, but ...
For some reason the "preview ads" were not displaying when he logs in his own computer (Win 7 with Chrome). At first we thought it had to do something with the JavaScript. That he had to refresh or even clear his cache in order to get it to work, but that didn't solve the problem. The console wasn't throwing any errors neither, so ...
Maybe it has to do something with his account? Because he is head development and of course we'd like to block him, just because we can :). We thought about the ACL managment because we had some special rules so we could visit but the employees could not. Maybe we forgot something, but then it had to throw an error in the Authentication logs. But when he logged in through Firefox, or on my computer everything works as it should. So it has nothing to do with that.
Then we had the clever idea to have a look in the element inspector to see if the advertisements were loaded correctly to the DOM. It seems to be there, so that's weird. We tried to turn off some classes that temporarily hides the ads wrapper on reload but that didn't solve it. So we started messing around with these elements. Dragging them around, toggling classes and styles but nothing seemed to work. But then ... He came up with the idea to drag the <table> containing the ads itself outside the div which was wrapping the table. We have this structure because this wrapper also contains the loading indicator to toggle more easily between them. And there it was, the table was showing up. So, we now know it has to do something with the wrapper. But what?
Solution
After some trying and debugging and trying again in my browser I started saying things out loud, like: "same Chrome version", "same CSS", "f5'd", "plugins" ... wait what? My colleague ran to his computer and said, it probably has to do with this; and turned of Adblock plus. After refreshing the page, the div (ads wrapper) showed up.
So, now we know what was causing the problem, but we wanted to know why and we want to make the tool accessible to every employee. What if an employee is using this plugin? We can not force him to turn off Adblock.
<div id="ads-wrapper">
<table> ... </table>
</div>
What do you see here? A <div> with the id "ads-wrapper". It seems like the Adblocker is hiding elements with this id. So let's try to change that attribute in the element-inspector. Changing it's value to "previews", "wrapper" or even "ads" would work just fine. But, when we have a combination of "ads" and "wrapper" it will fail. Changing the "wrapper" to "container" would also result in a hidden element.
First thought: regex. It probably is some regex which filters elements with an id matching their pattern and simply hides it.
I googled for a method to view the source of these Chrome plugins. Another colleague is building his own plugin and I helped him a bit with the HTML and CSS so I knew it was made in JavaScript. The source must be somewhere. I found this article which describes where you can find the source of installed plugins. I opened the folder of the plugin and found a whole bunch of JavaScript files. I opened them all and did a bulk-search for things like "regex" hoping not having to spit through all the files. Nothing.
After a while I found line 189 in background.js. Luckily this was the second file I opened so I found it pretty quick.
addSubscription("https://easylist-downloads.adblockplus.org/liste_fr+easylist.txt", "Liste FR+EasyList");
I opened the link used in this function in Chrome and saw a huge list of tags, url's and other stuff I don't even want to remember.
On line 5876 I found the following line:
...
###ads-wrapper
...
It seems like the first two ## are used to say: hey, this is an attribute, so filter for that in your function Mr. Adblock plus. Because later on your can find lines like ##.ads-wrapper. We found all the attribute values we tried earlier in this file. (In the background.js you can find some more files that contains matches to hide.)
Conclusion
Have a look at the .txt and check the classes, id's and other attributes and url's they exclude. Please do not try to remember them, but have a glance at it. You will find some patterns in these values so hopefully you can keep in mind that some plugins will block your content even if your intention was not to display advertisements!
It could be a real headache if a visitor of your public accessible site is mailing you with the message:
Hey, your site is not working. I can not see Foo Bar ...
So hopefully you will now think at this article for a second and think: "Maybe it has something to do with the adblocker plugins and my choices in the id's and classes.".
Used links
https://stackoverflow.com/questions/14259349
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
Russian