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 http://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.

Step 1: Making Image Files

Making a Mario Brothers Custom Google Chrome Theme
Making a Mario Brothers Custom Google Chrome Theme
Making a Mario Brothers Custom Google Chrome Theme
Making a Mario Brothers Custom Google Chrome Theme
Making a Mario Brothers Custom Google 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.

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 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.

Step 3: Testing the theme

Making a Mario Brothers Custom Google Chrome Theme
Making a Mario Brothers Custom Google Chrome Theme
Making a Mario Brothers Custom Google Chrome Theme
Making a Mario Brothers Custom Google Chrome 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

Making a Mario Brothers Custom Google Chrome Theme
Making a Mario Brothers Custom Google Chrome 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.

 
 

Tag cloud

make build easy simple arduino making homemade solar laser printed portable cheap mini building custom cardboard wooden create super lego turn paracord chocolate your paper light intel