How to Hide Google Doodles in Chrome

For years, Google used to surprise us with an occasional doodle, usually around the holidays or on other special occasions. Then they started hiring professional doodlers and inundating us with a different doodle every day - illustrations, animations, games, etc. If you love them, then this isn't the post for you. I generally find them distracting though, so I wrote an extension to block them.

"Hide Doodles" extension

The sole purpose of the extension is to simplify the Google search screen. Currently, it hides doodles and the "I'm feeling lucky" button. Get it from the Chrome store, and if you'd like you can check out the source code on GitHub.

Specifying where to hide

I tried to use as minimal an approach as possible, specifying match patterns that ensure the extension only runs for Google's domains. I've seen many extensions that don't do this - their extension runs for every site, and anyone who uses it gets a request to let it to update all sites, or all tabs, or whatever.

So I added google.com... and then quickly realized Google owns a lot of domains. Now my list is closer to like 200 entries.

"content_scripts": [
    {
        "matches": [
                "*://www.google.com/*",
                "*://www.google.ac/*",
                "*://www.google.ad/*",
                "*://www.google.ae/*",
                ...
                ...
        ],
        "css": [
            "style.css"
        ]
    }
],

Specifying what to hide

Initially, I just straight up hid the doodles and buttons I was interested in using display:none, but then I thought it'd be a nice touch to replace the doodles with the standard non-doodle Google logo. I took advantage of the fact that the content attribute works with regular elements in Chrome, when the value is a URL expression. (read more)

The "hplogo" and "logocont" IDs are for the large doodle on the front page and the small logo on the search results page, respectively. I just replace the doodle with the standard Google logo, represented as an SVG (truncated below). The last few lines have to do with hiding the "I'm feeling lucky" button. I've never used it ever, and I can't imagine anyone else does either.

#hplogo {
    content: url('data:image/svg+xml;utf-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 272 92" width="272" height="92"><path fill="#EA4335" d="M115.75 47.18c0 12.77-9.99 ... 4.41-6.46 5.1-11.65l-22.49.01z"/></svg>');
    height: 310px !important;
    width: 272px !important;
}

#logocont {
    content: url('data:image/svg+xml;utf-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 272 92" width="120" height="44"><path fill="#EA4335" d="M115.75 47.18c0 12.77-9.99 ... 4.41-6.46 5.1-11.65l-22.49.01z"/></svg>');
}

input#gbqfbb, #sbtc .ds:nth-child(2) {
    display: none !important
}

What it looks like

And here's what it looks like. Not much to see, but then that's the point.

Other Alternatives

Set Flags

According to a popular post, you should be able to set a couple flags and restart the browser. Here are the flags and what I set them to, but it didn't work for me.

Ad Blockers

If you've got an ad blocker, look for an area where you can add your own patterns to filter. In AdBlock for example, open options / customize and add this pattern to the bottom of the editor window. It worked for me, leaving an empty area where the doodle was. It should work for Firefox too.

google.*/logos/doodles

If you're curious, it just blocks any google domain (google.com, google.ca, etc) that includes the logos/doodles path, which is where the doodles are stored. For example, here's the link to today's:

https://www.google.com/logos/doodles/2018/guillermo-haros-105th-birthday-6241048765399040.6-l.png

Stylish

If you've got the Stylish extension (Chrome / Firefox), you can apply the Google: Force Default Logo style.

Stylish lets people upload CSS styles to change the look and feel of various websites. This style replaces Google's doodles with the standard logo, probably similarly to what I did.

DOODremove extension

There's another extension called DOODremove that has a similar effect, but it seems heavy-handed for such a small task. It runs a script (twice), which traverses the entire page (several times) to remove offending elements... and it runs it for every page on every site because it doesn't restrict it to Google's domains.

And if you're interested in yet other suggestions, this thread has quite a few:
How to disable Google's doodle - Web Applications Stack Exchange