Live CSS Editor

 

Shows a box where you can type CSS declarations and see they in action, real time. Simple and straightforward.

You can change the box position to any of the 4 browser corners, but can't make it float. But I really do not miss this feature.

It is possible to configure the extension to remeber the customization code by URL, filling automaticaly the code box when you open it in a previously customizated page. This made this more useful than inspect's feature "Edit as HTML", or changing the "element.style { ... }" field.

Never use the code body { display: none; }. The box is injected inside the <body> tag when activated, and if you hide it, you gonna hide all. If the "remember" feature is activated, I'm afraid you will need to reinstall the extension. I did it.

The only corner where you can resize the box correctly is the top-right. In all other cornes this is quite buggy.

 

See in Chrome Web Store

 

Screen Capture (by Google)

 

Great extension to take webpages screenshots.

Option to capture a page region, all visible content considering window size, the whole page, or any screen region (not limited to browser window area).

Allow saving in PNG format, or sharing it in Picasa, Facebook and Imgur.

 

See in Chrome Web Store

 

Tampermonkey (Greasemonkey for chrome)

 

This is literally the firefox's Greasemonkey , but for Chrome.

With this extension is possible to create a script that applies heavy customization (CSS and JS injection) when the opened URL matches a specific pattern (like http*://*.facebook.com/*)

It has a good code editor, with syntax highlighting, instead of a simple textbox.

You can make your own scripts easily, or download one at http://userscripts.org/. If you use Trello, I believe you would like to try my Trello Label Icon userscript.

It's useful to customize some sites and make them more closer to what you would like they be. Create a new script, define the target URL and write some Javascript. And you are done. Beyond this you can also use the built-in functions, that are pretty cool.

This is the kind of command that I use the most in my scripts, to inject CSS:

var imgYellow = "http://www.paulodev.com.br/images/icons/16x16/lightbulb_off.png";
GM_addStyle (".card-label.yellow-label { background-image: url('" + imgYellow + "'); }");
GM_addStyle ("body { background-color: #202020; color: #ffffff; }");
GM_addStyle ("a:link { color: #0099ee; } a:hover { color: #00ff40; }");

See in Chrome Web Store