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.
Post a Comment