Years ago, Google had a simple, easy-to-use search page. It was a functional, uncluttered, and downright peaceful landing page. In the age of Yahoo and AOL, less was more.

Easy! Clean! Beautiful!

Functionally, the page remains unchanged to this day. Somewhere along the line, though, Google decided to take the one thing that set the page apart from its competitors–the minimalist design–and put a bunch of drawings, designs, and text on it.

For example, here’s a page celebrating german reunification.

Here’s another one.

And one more.

In short, they ruined a good thing. What’s more, you can’t disable the doodle or the most visited pages section in Chrome’s settings, which…why can’t you do that?

What to do?

Let’s remove the Google doodle and the most visited pages section with a simple Chrome extension. Our requirements are as follows:

  • Remove the doodle
  • Remove the most visited pages section
  • Work on google.com or any variation of google.com such as google.de
  • Maintain the page’s functionality without interruption

How do you do that?

A Google Chrome extension is just a zipped bundle of files—HTML, CSS, JavaScript, images, etc. In our case, our extension requires three files:

  1. A background page (background.html) that runs in the extension process. It exists for the lifetime of your extension, and only one instance of it at a time is active.
  2. A manifest (manifest.json) file to hold metadata and other important details about the extension.
  3. An applicaiton file (app.js) to actually handle the behavior of the extension.

The process for creating a Google Chrome extension is:

  1. Write the code.
  2. Test the code locally.
  3. ZIP it up and upload it to the Chrome Web Store for publishing.

Let’s get to it.

Step 1: Write the Code

Project Setup

First, let’s create a folder to hold our extension:

1
2
$ mkdir simplegoogle
$ cd simplegoogle

Create Background Page

Next, let’s create our background page. There are two types of background pages: persistent background pages, and event pages.

  • Persistent background pages, like the one we’ll use, are always open. The end user doesn’t see anything, though.
  • Event pages are opened and closed as needed. Unless you absolutely need your background page to run all the time, Google tells you to use an event page.

In this case, I’m using a background page and not an event page.

1
$ touch background.html

…in which I put:

1
2
3
4
5
6
7
8
<html>
<head>
<title>simplegoogle</title>
</head>
<body>
<div id="simplegoogle"></div>
</body>
</html>

Create a Manifest File

Easy enough. Next, let’s create our manifest file.

1
$ touch manifest.json

…in which I put:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
{
"manifest_version": 2,
"name":"simplegoogle",
"version":"0.0.1",
"description":"Remove doodle and text from Google.com",
"icons":{
"128":"icons/icon128.png",
"48":"icons/icon48.png"
},
"homepage_url":"https://github.com/mkpt/simplegoogle",
"content_scripts":[
{
"matches":[
"http://*/*",
"https://*/*"
],
"js":[
"app.js"
],
"run_at":"document_start"
}
],
"permissions":[
"contextMenus",
"tabs",
"http://*/*",
"https://*/*"
],
"background":{
"page":"background.html"
}
}

Couple of things to note:

  • manifest_version: Specifies the version of the manifest file format your package requires. As of Chrome 18, developers should specify 2.
  • name: Your extension’s name.
  • version: The version of your extension. Every time you update your extension, increment this value.
  • icons: Links to your images–must have 128- and 48- pixel versions. I use the Android Asset Studio.
  • content_scripts.matches: Specifies which pages this content script will be injected into. I used wildcards because the number of google pages is staggering and…I mean come on…who has the time?
  • content_scripts.js: The name of our application file where all the good stuff happens.
  • run_at: (optional) Tells the browser when to run the script. Could also be document_end, document_idle, etc.
  • permissions: To insert code into a page, Google requires your extension to set cross-origin permissions for the page. It also must be able to use the chrome.tabs module. You can get both kinds of permission using the manifest file’s permissions field.

Here’s a full list of keys and values that you can use in your manifest.

Write the Script

Finally, let’s write the actual script:

1
$ touch app.js

…in which I put:

1
2
3
4
5
6
7
8
9
10
11
12
13
var cleanIt = function() {
var myIds = ['hplogo', 'my-tiles','most-visited','hplogop', 'dood', 'prm', 'prm-pt','gbq1'];
for (var i=0; i < myIds.length; i++) {
try {
var el = document.getElementById( myIds[i] );
el.parentElement.removeChild(el);
} catch(e) {}
}
}

window.onload = function() {
cleanIt();
};

Let’s break our cleanIt() function down a little. We grab a bunch of known IDs for the Google doodle and slap them into an array. This includes the ID for the most visited pages section, most-visited.

1
var myIds = ['hplogo', 'my-tiles','most-visited','hplogop', 'dood', 'prm', 'prm-pt','gbq1'];

Then we loop over those values, plugging them into our call to remove the element from the page:

1
2
3
4
5
for (var i=0; i < myIds.length; i++) {
try {
var el = document.getElementById( myIds[i] );
el.parentElement.removeChild(el);
} catch(e) {}

Finally, I call cleanIt() when the window loads:

1
2
3
window.onload = function() {
cleanIt();
};

Step 2: Test It

Let’s test it locally.

  1. Open Chrome.
  2. Go to chrome://extensions (or open Settings > More Tools > Extensions).
  3. At the top, select the Developer Mode checkbox to reveal the dev options.
  4. Click Load unpacked extension… and then select the folder where you have all this stored. The extension loads in your browser.
  5. Hit www.google.com or www.google.de or www.google.ch and bask in the glory.

Sweet.

Step 3: Publish It

  1. Save your work, zip up the file, and go to to the Chrome Web Store.
  2. Click the Settings icon (in the top right) > Developer Dashboard.
  3. Click Add New Item.
  4. Upload your masterpiece. It could take a few hours for the extension to show on the store, but that will give you more time to bask in your genius work.

Once uploaded, it’ll look like this in your Developer Dashboard:

And like this in the store:

And here is the source code. Now go on and make great things.