Sunday, October 18, 2009

How to create Google Chrome theme with your picture.

Since the day I installed Mariah Carry theme on Google Chrome I wanted to create one with my picture. This did not work immediately since the Linux version of Chrome browser could not pack the theme into .crx file. The new version 4.0.222.5 does.

Here is the screenshot of my theme:

This is how I created it:
Create a folder MyTheme and another folder Image inside it. Copy the following text on editor and save it as manifest.json in MyTheme folder.

{
   "name": "name_of_theme",
   "theme": {
      "colors": {
         "bookmark_text": [ 255, 255, 255 ],
         "frame": [ 255, 255, 255 ],
         "ntp_background": [ 45, 42, 41 ],
         "ntp_header": [ 0, 0, 0, 1 ],
         "ntp_link": [ 255, 255, 255 ],
         "ntp_section": [ 68, 68, 68, 0.3 ],
         "ntp_section_link": [ 255, 255, 255 ],
         "ntp_section_text": [ 255, 255, 255 ],
         "ntp_text": [ 255, 255, 255 ],
         "tab_background_text": [ 0, 0, 0 ],
         "tab_text": [ 255, 255, 255 ],
         "toolbar": [ 0, 0, 0 ]
      },
      "images": {
         "theme_frame": "Image/theme_frame.png",
         "theme_ntp_attribution": "Image/theme_ntp_attribution.png",
         "theme_ntp_background": "Image/theme_ntp_background.png",
         "theme_tab_background": "Image/theme_tab_background.png",
         "theme_toolbar": "Image/theme_toolbar.png"
      },
      "properties": {
         "ntp_background_alignment": "bottom",
         "ntp_background_repeat": "no-repeat",
         "ntp_logo_alternate": 1
      },
      "tints": {
         "buttons": [ 1, 1, 1 ]
      }
   },
   "version": "3"
}

Replace "name_of_theme" with the name you want to give to the theme.

Now you require following images in the Image folder:



theme_frame.png


theme_ntp_attribution.png


theme_ntp_background.png (Put your photograph as this image)


theme_tab_background.png









theme_toolbar.png

You can download the images from this page.

Next step is to pack the theme. Type the following in the address bar of the chrome browser:
chrome://extensions/
Click on Pack_extension under Tools.
Click on Browse for Extension_root_directory
Chose MyTheme Folder
Click on Ok.
This will create two files MyTheme.crx and MyTheme.pem.

Now you have to open the .crx file using Chrome browser. You can do this by typing the following in the address bar:
file:///path_to_MyTheme.crx

Save the file and the theme is installed.

10 comments:

Chris said...

You didnt include the theme_ntp_background.png

what are the dimensions used for this picture?

Anonymous said...

Thank you a lot for this.

Kamalakar Agashe said...

This is for Chris
You have to use your picture or whatever picture you want in .png format for theme_ntp_background.png

Unknown said...

it says linux at the top can u still use this method with a pc?

Kamalakar Agashe said...

This is for guitarking668
I think by pc you mean a computer which works on Windows. Yes the method should work on Windows as well.

Unknown said...

Just found this via search. Thank you! Was getting tired of the boring themes offered on Googles Themes page!

Balog Viki said...

can i remove your name somehow from the theme?

Anees said...

I too wrote an article on creating google chrome theme. Please take a look. http://teklessons.blogspot.com/2010/07/howto-build-theme-for-google-chrome.html

Unknown said...

for sherry 870

Use GIMp to create a 200 x 150 transparent image and use it to replace theme_ntp_attribution.png.

Unknown said...

I would never want to miss out any opportunity to read out your contents.
premium cms templates

Air India direct flight to San Fransisco has flown through China today.

 My sister in law left for San Fransisco by AI 173 flight which flows over North Pole. I tracked that flight on flightstats.com till it land...