Paul Carbo Web Design & Development

During the process of figuring out how to construct a CRX theme for Chrome, I put together a cheat-sheet for myself. That cheat-sheet turned into a fully detailed list of elements and definitions. That fully detailed list was later coupled with a pretty involved Photoshop template that gave me a real-time view of the theme while making color and image changes, which then totally simplified the whole process of doing the actual scripting.

Now it’s to a point that it’s able to be comprehended by people other than myself, so I’d like to share it with you in a package I call the CRXAssistKit.

What made the process of putting a theme together slightly confusing was the lack of instruction from Google but more importantly, how changing the color of one element, also changed the color of other elements.

For example, the element “ntp_header” (which stands for New Tab Page Header) you’d think would directly affect some major part of the new tab page, but no. Altering the color of this, changes the border around the new tab page’s bookmarks area when separated from the toolbar. It also changes the border around the “recently visited” area under the speed-dial, though not resulting in the same color since this border has a transparency automatically applied to it. Not done…. It also changes the hover color of the speed-dial thumbnails, as well as those little view-option buttons in the upper-right corner.

That example is probably the extreme, but keep in mind that’s one of about twenty different elements which which we have color-control over. You can see how it would quickly get confusing trying to remember every little detail, especially when there’s really no specific pattern to pick up on. It’s basically just figuring it all out and memorizing it. I knew I’d eventually figure it all out (for the most part) but I wasn’t even going to attempt to try and remember any of it. I’m just making themes for Google Chrome here, I need my brain-space for more important matters.

So while struggling through the trial and error of figuring out which element was associated with each part of Chrome, I put together a list I could refer to in the future. The specifics regarding what elements are able to be modified came from reading almost every line of the browser_theme_provider.cc file mentioned a bunch of times on the one page of theme help from Google.

Here’s that list for all who are interested. A more detailed version will be included in the CRXAssistKit along with the PSD template which I’ll get to in a second.

Update, 01/22/10: I have just noticed that someone created a Wiki over at Chromium’s project site with instructions on how to create a CRX theme. I didn’t read too much of it in detail yet, but I assume it is more descriptive than what I came up with. See for yourself..

Click to view ▼

So now that we know what’s what regarding images and colors, now onto the real-time Photoshop template which almost removes the need for having a detailed list of definitions.

Here’s a basic screenshot of the template.

As sophisticated and detailed as this is, I set it up to be very simple to modify as well as translate over to the actual script.

Each layer is either an IMAGE element or a COLOR element. For the COLOR layers, simply go into the blending options and change the Color Overlay RGB value to see what all will be affected. The image below shows a color change for the layer “ntp_header” which I mentioned earlier. Notice the different elements that all change color simply by modifying this single layer.

For the few IMAGE elements, these require a bit more creativity. For example, the “theme_toolbar” image I have as the actual shape of the entire area of this element, though this isn’t how the final image will be.

You can make changes to that image in any way you want. You can use the blending options like in my example, or you could bring in a photo or a custom image to put in it’s place. You’ll just have to figure out how the tiling will work. In this example, I just edited the colors and cropped like so. Since this image automatically repeats horizontally, there is no need for the width to be any bigger than I have it, you just have to be sure that the height is at least 120px or it will not encompass the entire area.

Then, just save as “theme_toolbar.png” into a directory made for the theme you’re creating inside a folder named “img” or “images” or whatever you want, you’ll just have to reference their location in the manifest file.

While we’re at it, I might as well give a brief rundown of the manifest.json file and ultimately how to package up your theme.

Like I said, create a folder for the theme you are creating, name it whatever you’d like. Inside that folder, create another folder titled “img” and save any image files you create from the template in there with their correct title (refer to the layer name or the definitions). Next, open up a text editor. (Something other than MS Word, use Notepad++ or something similar. I don’t think there’d be anything wrong with using plain-old Notepad in this case, but that shouldn’t serve as a reason to actually use it. Do yourself a favor and remove it for your system all together and replace it with this.)

Inside the editor, copy and paste what’s below

{
  "name": Theme Name",
  "version": "1.0",
  "theme": {
    "images": {
      "theme_frame": "img/theme_frame.png",
      "theme_tab_background": "img/theme_tab_background.png",
      "theme_toolbar": "img/theme_toolbar.png"
    },
    "colors": {
      "frame": [ 52, 87, 159 ],
      "frame_inactive": [ 52, 87, 159 ],
      "tab_text": [ 0, 0, 0 ],
      "tab_background_text": [ 75, 75, 75 ],
      "toolbar": [ 210, 225, 245 ],
      "bookmark_text": [ 25, 45, 75 ],
      "ntp_background": [ 255, 255, 255 ],
      "ntp_header": [ 52, 87, 159, 1 ],
      "ntp_text": [ 25, 45, 75 ],
      "ntp_link": [ 52, 87, 159 ],
      "ntp_link_underline": [ 52, 87, 159, 0.3 ],
      "ntp_section": [ 232, 232, 248 ],
      "ntp_section_text": [ 25, 45, 75 ],
      "ntp_section_link": [ 20, 50, 115 ],
      "ntp_section_link_underline": [ 20, 50, 115, 0.3 ]
    },
    "tints": {
      "buttons": [ -1, -1, -1 ],
      "background_tab": [ 0.5, 0.5, 0.5 ],
      "frame": [ -1, -1, -1 ],
      "frame_inactive": [ -1, -1, -1 ],
      "frame_incognito": [ -1, -1, -1 ],
      "frame_incognito_inactive": [ -1, -1, -1 ]
    },
    "properties" : {
      "ntp_background_alignment" : "bottom"
    }
  }
}

Put in your theme’s name and version, and replace all the RGB colors you made up in Photoshop with the values here. I only have three images used in this case, but there are others you could add. Same with the colors, I did not define every one but you can if you want to. Also, you’ll see the “properties” which has an alignment for the New Tab Page background image, though I did not define a background image, this is just there as an example and won’t hurt being there without an image. Other items can be aligned and are described in the CRXAssistKit.

You’ll also notice “tints.” Tints are a whole other story that I will not get into here. Basically, they are HSL (hue, saturation and light) values that can be applied to elements. The -1’s represent no-change. You’ll have to experiment with them to try and see if they’ll be any benefit to you, but honestly I haven’t found much reason to use them. The “buttons” tint is the most important and alters many different elements which are all listed in the download. Mostly, they are responsible for the little graphics inside the buttons in the toolbar, though they also have an effect on the shadowing/lighting of those buttons. Slight changes to the buttons’ tint values can cause very drastic changes, so I’ll leave those for you to try and figure out if you’d like.

Now, after you’ve inputed all your values and gave your theme a name and version, save this file as “manifest.json” in your theme’s folder. The next step is seeing how it looks in the actual browser. If you don’t already know, all you need to do to test how it looks is open up the Extensions page under the wrench menu, or just put this “chrome://extensions/” into the address bar. Click on “Load unpacked extension…”, find and select your theme directory which contains all of your theme’s files, and click OK.

That’s it. If done properly, it should automatically switch to your newly created theme. If there are any problems with your manifest file, it will give you an error describing where the problem is. Also, if you need to make changes to anything, you’ll need to rename your theme’s folder to something new so Chrome treats it as a new theme.

So, after you are happy with the results, the last step is to pack it up. This time, click on “Pack extension…”, browse for your folder and select it. ( You can ignore the “Private Key” area.) Click OK, and it should give you a confirmation message stating where your crx and pem files were saved. And that’s it. You’re all done. Easy, right?

To start using your new crx theme, just drag the crx file into Chrome and it will ask if you’d like to download it, select “Continue” and it will change over.

This may be a little confusing at first, but hopefully this kit I put together will speed along the learning curve, because once you get the idea of what’s going on, it’s a really simple process.

I’ve made all of the above available for download in the CRXAssistKit, the Photoshop template, the complete descriptions and definitions in PDF form. I also included a special new theme I created (made to look like ChromeOS – have a peek) in it’s raw form to serve as a starting point. In case you were unaware, you’re easily able to unpack any theme out there simply by manually renaming the .crx extension to .zip and unzipping it.

I will note that my information may not be 100% accurate and is just how I understand things thus far. If anyone has corrections for me or knows of anything I may have overlooked, please let me know and I will make changes. Hopefully this is able to compensate for Google’s lack of information and make it easy enough for pretty much anyone to create their own theme. Good luck.