Pages

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:

  1. You didnt include the theme_ntp_background.png

    what are the dimensions used for this picture?

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

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

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

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

    ReplyDelete
  6. can i remove your name somehow from the theme?

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

    ReplyDelete
  8. for sherry 870

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

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

    ReplyDelete