socialrosiechen: Stylebot for Chrome lets you easily customize Web pages

Sunday, August 22, 2010

Stylebot for Chrome lets you easily customize Web pages

Filed under: Productivity, Google, Browsers

Stylebot is a Chrome add-on that provides a point-and-click interface for customizing the CSS on any page, and then it saves your customizations for next time -- and if you have bookmark sync turned on, it even syncs them for you!

The way that it works is very simple. In Selection mode, each element on the page gets a highlighted frame when you hover over it. As soon as you get the element that you want, just click it. Any CSS declarations that you then specify are applied to that element.

"Specifying CSS declarations" sounds pretty technical, but it's basically clicking a bunch of buttons. You need to know a bit of CSS to make good use of the add-on, but it's also a very good way to learn. Of course, if you do know your CSS, you can just switch to Advanced mode and hand code it instead.

A few missing features:

Up/down keys do not work for incrementing/decrementing values. That's a must-have Greasemonkey feature!
Existing font sizes (and other properties) are not displayed. This means that, if I want to increase the font size of an existing element, I need to start by guessing what the current size is. Then, I need to nudge it up by entering (say) 12, deleting, entering 13, deleting, entering 17, deleting, entering 15, etc. It rapidly gets annoying. Up/down keystroke support + showing the currently selected font size would go a long way towards alleviating this.
There's no simple way to undo a single change. You can either reset everything you've done, or you can manually edit the CSS in order to remove the change (if your CSS chops are up to the task).

Other than those few things, it's certainly a handy add-on for customizing the Web. I like that it saves your settings automatically and syncs them. I've embedded the add-on's "intro video" after the break.