Making a Mario Brothers Custom Google Chrome Theme




Introduction: Making a Mario Brothers Custom Google Chrome Theme

About: Full time Technical Support Associate. Part time Web-Designer & Developer. What's left I spend trying to make stuff.

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 so I decided to take some time and make another instructable.

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

Teacher Notes

Teachers! Did you use this instructable in your classroom?
Add a Teacher Note to share how you incorporated it into your lesson.

Step 1: Making Image Files

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.

Step 2: Making the MANIFEST JSON File

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", "icons": { "128": "images/128.png"},
{ "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.

Step 3: Testing the Theme

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

Step 4: Packing the Theme

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.

Be the First to Share


    • Arduino Contest 2020

      Arduino Contest 2020
    • First Time Author Contest

      First Time Author Contest
    • Space Challenge

      Space Challenge

    6 Discussions


    4 years ago

    Or much more easier with - just few clicks.

    vault boy05
    vault boy05

    Reply 1 year ago

    so what the guy worked hard on this so give him some credit.

    Tater Zoid
    Tater Zoid

    5 years ago

    This is pretty cool.