A lot of CSS hackers have made custom skins for various websites. For instance, if you really like the Helvetica font, there’s Helvetireader, Helvetical, and Helvetimail for Google Reader, Google Calendar, and Gmail, respectively. To get these userstyles up and running on Chrome, most designers tell you to install a userscript, which Chrome handles as an extension. When the page is done loading, Chrome runs the userscript, which uses javascript to insert the CSS into the page. This is kind of a kludge; sometimes you get a flash of the original style. Also, for something as simple as a userstyle, there should be a way to include it without javascript.

And there is. In this brief tutorial, I will demonstrate how to package your userstyle as a Chrome extension and run it with no javascript.

The core of a Chrome extension is the manifest.json file. Here’s how it looks.

{
// The name of your plugin
"name": "My Site Skin",
"version": "1.0",

// Give it a useful description
"description": "A generic userstyle extension.",

"content_scripts": [ {
"all_frames": true,

// The name of the CSS file (packaged with your extension) to inject
"css": [ "css/myuserstyle.css" ],

// The sites on which to inject the CSS
"matches": [ "http://*/*", "https://*/*" ]
} ]
}

Obviously, you’ll want to change the name of the plugin and give it a nice description, so go ahead and change these. Change the name and relative directory of the CSS file to point to your userstyle. Lastly, edit the match patterns to target the site or sites on which you want to activate your skin.

You’re done. Test your extension in Chrome by going to the extensions window, enabling developer mode, and loading the folder that contains your manifest.json file as an unpacked extension. When you’re happy with how everything works, zip up the folder and upload it to the Chrome extensions gallery.

A few additional items. First, note that by injecting CSS by this mechanism, you are doing it before any DOM is constructed or displayed for the page. This eliminates the ugly flash that comes from using a userscript.

Second, the CSS item in the JSON file is an array. You can include more than one CSS file and they will be loaded in order.

Third, if you want to load a remotely hosted file (say, you want to push out updates more easily), just package your extension with a CSS file that uses an import rule:

@import url("http://www.mydomain.com/css/remotecssfile.css");

That’s it for now. If you have any feedback, hit me up on Twitter.