Wednesday, August 12, 2009

The Anatomy of a chrome skin.

We chrome has skin and here is how they look on the inside.

A zip file with the extension "crx" which contains a file called "manifest.json" which contains the set of properties describing which images to use and various font colours.

Here is the what the "manifest.json" file for the "Brushed Metal":

{
   "version":"1.0",
   "name":"Brushed",
   "theme":
   {
      "images":
      {
         "theme_frame":"i/agxjaHJvbWV0aGVtZXNyDAsSBEZpbGUYk6wBDA",
         "theme_toolbar":"i/agxjaHJvbWV0aGVtZXNyDAsSBEZpbGUY2bMBDA",
         "theme_ntp_background":"i/agxjaHJvbWV0aGVtZXNyDAsSBEZpbGUYzZwBDA",
         "theme_button_background":"i/agxjaHJvbWV0aGVtZXNyDAsSBEZpbGUY2rMBDA"
      },
      "colors":
      {
         "frame":[117,117,117],
         "toolbar":[117,117,117],
         "tab_text":[0,0,0],
         "tab_background_text":[0,0,0],
         "bookmark_text":[0,0,0],
         "ntp_background":[117,117,117],
         "ntp_text":[0,0,0],
         "ntp_link":[0,0,0],
         "ntp_section":[255,255,255,0.4],
         "ntp_section_text":[0,0,0],
         "ntp_section_link":[0,0,0]
      },
      "properties":
      {
         "ntp_background_alignment":"top left",
         "ntp_background_repeat":"repeat-x",
         "ntp_logo_alternate":1
      },
      "tints":
      {
         "buttons":[0.6,0,0.5]
      }
   }
}

The string (and it's friends)
"i/agxjaHJvbWV0aGVtZXNyDAsSBEZpbGUYk6wBDA"
refer to png image files located in the zip filepath "/i/".

Knowing what you now know, you too can make a fun and cool skin for chrome.

Note: I leave it as a task for the reader to add javascript functions in their json.

No comments: