Themes have been gradually getting simpler to activate in the Chrome browser, but they became enabled by default in the newest developer releases this week, version 3.0.195.3 and a hasty bug-fix release Wednesday night, version 3.0.195.4. No longer must you mess with pesky “–enable-extensions” command-line switches or other nitty-gritty options.

If you’re using the new Chrome developer release, there are two sample themes available, “camo” and “Snowflake”. To activate them, click the link then agree to save the CRX file. Chrome will then switch themes and give you a yellow alert it did so.

Google is working on making this easier. In the tools menu, clicking “Options” and then “Personal Stuff,” there’s a “Themes” section with a “Get Themes” button. So far the Web site it links to is empty, but presumably it will be populated with some themes soon enough.

The options dialog box also includes an option to reset the theme to Chrome’s default. However, it appears there’s not much in the way of theme management at present; to switch themes, you’ll have to reinstall them from the Web or your hard drive.

Not every Chrome user can try themes so easily yet. Google typically introduces these changes with the developer release before spreading them to the slower-moving, better tested beta and stable versions.

Chrome Default Theme

Chrome Snow Flake Theme

Chrome Camo Theme

Creating an Extension

The following is the procedure for creating an extension that adds a button to your tool bar along the bottpm of the browser window.

First of all, you will need to be using either the developer channel of Chromium or else a recent trunk build. Once you’re using one of those, follow these instructions to create and add a basic extension.

1.Create a folder somewhere on your computer to contain your work. For this discussion, we’ll assume the folder is located at c:myextension, but it can be anywhere.

2. Inside this folder, create a text file called manifest.json and put this in it:

{
“name”: “My First Extension”,
“version”: “1.0″,
“description”: “The first extension that I made.”,
“toolstrips”: [
"my_toolstrip.html"
]
}

3.  Add a text file to the folder called my_toolstrip.html, and put the following code in it:

<div class=”toolstrip-button”>
<span>Hello, World!</span>
</div>

4.Find your chrome shortcut (for example, right-click the Chrome icon on your desktop and choose Properties) and add the –load-extension flag to it:

chrome.exe –load-extension=”c:myextension”

1. Restart Chrome. You should see your button in a new toolbar along the bottom of the browser window.
2. Perhaps you would like it better if the button did something? Ok, create a new text file in the same place called hello_world.html, and put this code in it.
3. Now change the code in my_toolstrip.html so that it looks like this:

   <div class=”toolstrip-button” onclick=”window.open(‘hello_world.html’)”>
   <span>Hello, World!</span>
   </div>

4. Restart Chrome and click the button.

Notes

1. –enable-extensions is only needed while the extensions system is in development and will be removed.

Creating a Theme

Themes are packaged as extensions – you can follow the procedure given above for how to create and sign a CRX file.

Below is an example manifest.json file:

{

“version”: “2.6″,

“name”: “camo theme”,

“theme”: {

“images” : {

“theme_frame” : “images/theme_frame_camo.png”,

“theme_frame_overlay” : “images/theme_frame_stripe.png”,

“theme_toolbar” : “images/theme_toolbar_camo.png”,

“theme_ntp_background” : “images/theme_ntp_background_norepeat.png”,

“theme_ntp_attribution” : “images/attribution.png”

},

“colors” : {

“frame” : [71, 105, 91],

“toolbar” : [207, 221, 192],

“ntp_text” : [20, 40, 0],

“ntp_link” : [36, 70, 0],

“ntp_section” : [207, 221, 192],

“button_background” : [255, 255, 255]

},

“tints” : {

“buttons” : [0.33, 0.5, 0.47]

},

“properties” : {

“ntp_background_alignment” : “bottom”

}

}

}

Images

Image resources use paths relative to the root of the extension. You may override any IDR_THEME_* image specified in theme_resources.grd

Colors

Colors are specified in RGB. The full range of colors that can be specified can be read in browser_theme_provider.cc

Tints

Rather than letting you override buttons with images (which doesn’t work across platforms, and is brittle in the case where we add new buttons. The full range of tints that can be specified can be read in browser_theme_provider.cc.

Tints are specified in HSL in floating-point numbers in the range 0-1.

Hue is an absolute value, with 0 and 1 being red.

Saturation is relative to the currently provided image – 0.5 is no change, 0 is ‘totally desaturated’ and 1 is ‘full saturation’.

Lightness is also relative, with 0.5 being no change, 0 as ‘all pixels black’ and 1 as ‘all pixels white’.

You may alternatively use ‘-1.0′ for any of the HSL values to specify ‘no change’.

Implementation

Themes are installed and packaged as extensions – once installed, the theme specification is copied into your browser preferences, allowing users to override individual theme choices. This theme data is loaded and managed by browser_theme_provider.cc (which also handles telling everyone to repaint when a theme is applied).

Theme provider

The theme provider has the following interface:

GetBitmapNamed(int id)

This wraps ResourceBundle::GetBitmapNamed and provides themed images if they exist, falling back to the default ResourceBundle images otherwise.

GetColor(int id)

Returns an SkColor with the specified ID (see the list of ids in browser_theme_provider.h)

Views Implementation

All views have access to a theme provider through their GetThemeProvider() method – this returns the root widget’s theme provider. In browser-ui land, the theme provider hangs off the profile, and the root widget is profile aware.

In some cases, the root widget is not profile aware, and so you will have to inject the theme provider into the view. An example of this is tab_renderer.cc, which doesn’t have access to the profile while in its dragged state.

Link

http://dev.chromium.org/