Making a Mario Brothers Custom Google Chrome Theme

I have been trying to post a new instructable, but due to lack of time.

Anyway few days ago prashjini commented on a very old instructable of mine https://www.instructables.com/id/Making-a-Google-Ch... so I decided to take some time and make another instructable.

This time I'll show you how to make a custom Chrome Theme.

For this start up your image editor, I used Photoshop you can use gimp, mspaint, whatever.

First image that we need is the background image, the dimensions depend on your screen resolution and size.
My resolution is 1024x786 so my background image size is 1024x653px.
Your image can be larger, but some parts might be cut off.

Second image is the frame, you know the blue bar on the top with the _ [] X buttons.
If you are using a single image then the width should be equal to that of background image and the height should be 30px.
If you are using a sold color like me, you can make the width less as the images repeats itself.

The next image is tab size should be 66x65px.

The toolbar image is size should be 120x120px. I used a pattern for this.

If you want to add your logo in the credits you can do that. The height should be 65px.
I'm not placing any logo, I've added it in my background image.

*NOTE - The credit is right oriented meaning if you want to place your logo on the left side you have to make the width equal to the size of background image and place the logo near the left side.

Lastly the icon image, you don't need to put it, but I prefer to make it. Size should be 120x120px.

*NOTE - All the images should be .png, you can make the background transparent, if you want to.

This is the important and easy step.

Copy and paste this code in Notepad
{
"name": "Mario Brothers Chrome Theme",
"version": "1.0",
"manifest_version": 2,
"description": "Mario Brothers v1.0 Google Chrome Theme designed by Tanmay Das. ©Copyright, Tanmay Das. Visit at www.rexdzines.com", "icons": { "128": "images/128.png"},
"theme":
{ "images" :
{ "theme_frame" : "images/frame.png",
"theme_toolbar" : "images/toolbar.png",
"theme_ntp_background" : "images/background.png",
"theme_tab_background" : "images/tab.png",
"theme_ntp_attribution" : "images/theme_ntp_attribution.png" },
"colors" :
{ "ntp_link": [255, 255, 255],
"ntp_text": [0, 0, 0],
"ntp_section_link": [255, 255, 255],
"ntp_section_text": [255 , 255 , 255],
"ntp_background": [10 , 17 , 27],
"frame": [10 , 17 , 27],
"toolbar": [255 , 255 , 255],
"tab_text": [255, 255, 255, // changes the color of the selected tab heading to white
"tab_background_text": [0 , 0 , 0], // changes the color of the text on the not selected tab to black
"bookmark_text": [255, 255, 255] }, // changes the color of the bookmark text to white
"tints" : { "buttons" : [0.33, 0.5, 0.47] },
"properties" : {
"ntp_background_alignment" : "bottom",
"ntp_background_repeat": "no-repeat" } } }

Name the file manifest.json, also remove all the // comments before saving the file.

Place the images in a folder call it "images" and then place the images folder in a folder and name it to match your theme.

To test it go to Tools > Extensions

Click on Developer Tools > Load Unpacked Extension

Select the folder in which you have all the files > OK and done

Go to Extension > Click on Pack Extension

Click on the top Browse button > Select the folder with the files > Pack Extension

Two files foldername.crx and foldername.pem would be created.

.pem file is useful for making an update, but for now we are interested in the .crx file.

To install the theme just drag and drop the .crx file in your browser and done.