Change your New Tab background in Chrome

September 26, 2011. Posted by Travis in Design Tricks, Just For Fun

change chrome new tab background

It's a fact that design nuts love to customize their workflow - I for one am guilty. If you're into this sort of thing, you may enjoy this article about customizing the background of Dashboard in Lion. I did this the other day, it looked much nicer than the default "Lego" pattern. Naturally I wanted to take it a step further and change the background of my Google Chrome "New Tab" wallpaper as well. Unfortunately, all the default themes in Chrome's repository are atrocious - not to mention some might only wish to change the background and leave the rest of Chrome's elegant design "as is." Here's your guide on how to do just that.

For this example, I'll use the above tiled image that I personally used for both Dashboard and chrome - a nice velvet looking criss-cross pattern. Click to view it full-size, and save it if you want to use it. Otherwise use some Google-Fu to find a nice tileable image (large full size images work as well, I just find them distracting).

While it would seem changing the background would be easy as changing a line in the default Chrome CSS file, it's all packaged using Google's equivalent of a zip file, not to mention hidden like valuable collector toys at a garage sale. Therefore, we need to create a barebones theme, with the New Tab background being the only thing defined. 

First, you'll want to create a new folder on your desktop for the theme. I called mine velvet. Inside of your newly created folder, create another new folder called images. Inside this images folder is where you will place your background file. Note: It must be in .png format.

Next, you will need to create a new empty .txt file, and rename it to manifest.json. You can use any standard text editor to modify this file, just as long as it's not Front Page 98.

Paste in the code below.

 {
   "version": "1.0",
   "name": "Velvet",
   "theme": {
     "images" : {
       "theme_ntp_background" : "images/background.png"
     },
     "colors" : {
       "ntp_link": [255,255,255], 
       "ntp_text": [255,255,255], 
       "ntp_section_link": [255,255,255], 
       "ntp_section_text": [25,25,25],
       "ntp_background": [25,25,25]
     },
     "tints" : {
 
     },
     "properties" : {
       "ntp_background_repeat": "repeat"
     }
   }
 }
 

Then change the following:

  1. The name of your theme
  2. The filename of the .png file you used for your background.
  3. If you are using a light colored image, you can delete everything inside of "colors", just like everything is deleted from inside "tints." This will leave it at the default of Chrome, which is configured to display everything on light backgrounds. I want the text to appear white however so I can see it on a dark background. Note: All colors must be in RGB.
  4. If you want the background color (which is underneath the image) to match the image during the very brief time the image loads (to prevent flickering), change ntb_background to an all-around average color of your image. 
  5. If you are using an image which is tileable, leave "ntp_background_repeat" on repeat. If you are using a large image however, change this to no-repeat

After that, save your manifest.json file, and open up Chrome. Paste in the following in the URL bar: chrome://extensions

Click on "Load unpacked extension...", select the folder you created on your desktop, and then hit OK. Don't navigate inside the folder so you see images or the manifest file, just select the root folder then click confirm. You should now be able to open a new tab and see your changes. Note: If you receive a message that your manifest.json file has errors, go back and look to make sure there are no floating commas at the end of the last line. It gives you a line number so finding these errors should be easy. You can also go back and tweak things if necessary.

Once you're satisified - go back to chrome://extensions and select "Pack Extension..." For "Extension root directory" select the theme folder again, and confirm. You don't need to specify a key unless you plan to upload it to the theme database and update it in the future. Once all is said and done you should have a .crx file containing your theme next to your original theme folder. All that's left to do is drag the theme.crx file into chrome. It will ask if you want to continue, just hit accept and the theme will be installed.

If you get a CRX_FILE_NOT_READABLE error message, it's likely because you need to update Chrome, or you're using some sort of weird build and will need to re-install. I recieved this message using Chromium, however the theme worked just fine on my VM with Windows 7. Worst case scenario is you move the folder into an obscure location and from then on just hit "Load unpacked extension..." whenever you want it to show up. Even if you quit chrome and re-open it, it will still be loaded so that is the good news.

change background of chrome new tab