I'm getting increasingly annoyed by all the cutesy distractions and nonsense we bloat technology with, from ascii art littered throughout log files, to animated doodles on a simple search. For the latter, I got annoyed enough to write a Chrome extension to hide doodles. It's not that I mind a well-designed site or a cool mascot, but don't toss 'em in my face while I'm trying to get the most out of your tool.

We use Travis CI pretty extensively at work for building our projects, and every time I reload a page it flashes a doodle image logo thingy for a moment. It not a useful "page loading" image as it doesn't indicate that the page is doing anything, and anyways it seems unnecessary as their site's so fast it loads in under a second.

I'm not going to bother trying to write an extension to hide these logos. This time I'm taking a different approach. I already use Adblock Plus, and it can do the job for me. But first, let's back up and figure out what we're even trying to block.

Can I see what my browser is loading?

Yes, you can. If you weren't aware, Firefox and Chrome have some nice developer tools built-in that can show you all kinds of information about the pages you're loading. I won't go into detail as I'm just interested in the "Network" tab at the moment, but here's the official docs for Chrome and Firefox.

For Chrome on a Mac press "Cmd+Opt+I" to open the tools and then select the "Network" tab. For Firefox on a Mac, just press "Cmd+Opt+E" to go directly to the tab. If you're on Windows, I don't know what the shortcut is so just right-click on a page and choose "Inspect" to open the tools.

From here on out I'm using Firefox as an example, but the process for Chrome is similar. While you're on the "Network" tab, open the Travis CI site (or reload it). Click on the "Images" tab in the Network panel, and you'll see where the page requested the logos.

network-load-logo-a

network-load-logo-b

A 200 means "ok", while a 304 indicates the image was downloaded previously and hasn't changed, so there's no need to get it again. Here's a list of all the possible logos they might momentarily flash up on the screen.

https://travis-ci.com/images/logos/TravisCI-Mascot-1.svg
https://travis-ci.com/images/logos/TravisCI-Mascot-2.svg
https://travis-ci.com/images/logos/TravisCI-Mascot-3.svg
https://travis-ci.com/images/logos/TravisCI-Mascot-4.svg
https://travis-ci.com/images/logos/Tessa-1.svg
https://travis-ci.com/images/logos/Tessa-2.svg
https://travis-ci.com/images/logos/Tessa-3.svg
https://travis-ci.com/images/logos/Tessa-4.svg
https://travis-ci.com/images/logos/Tessa-pride.svg
https://travis-ci.com/images/logos/Tessa-pride-4.svg
https://travis-ci.com/images/logos/TravisCI-Mascot-pride.svg
https://travis-ci.com/images/logos/TravisCI-Mascot-pride-4.svg

Can I block (or at least hide) what my browser is loading?

Oh yeah. And there are a lot of ways to go about this. You could use various css properties to hide elements, like display, visibility or even opacity. You could use JavaScript to remove (or replace) the elements like I did with my Hide Doodles extension.

You could also make use of a tool you already use. In my case, it's the ad blocker tool Adblock Plus. If you use a different extension, you'll probably find with a little poking around that it supports something very similar.

Just open the settings, go to "Advanced" and paste the following into your custom "filter list", in order to block the logos. You could also just make one entry that ends in /logos but I have no idea if there's anything else in that directory that I might not want to hide.

adblock-plus-filter-logos

If you're interested, there's a lot more info on creating custom filters in the Adblock Plus official docs.

How do I know Adblock Plus is doing its job?

Just open the same "Network" tab in the developer tools again, but this time go to the "Adblock Plus" tab under it. Reload the Travis CI page and look for an entry for one of the logos. You can see where the extension is blocking the resource for you. Success!

network-inspector-adblock-plus