Grid Helper Greasemonkey script for web development

gridhelper.user.js

// ==UserScript==
// @name		Grid Helper
// @namespace		http://sixtwothree.org
// @description		Grid Helper adds a keyboard shortcut and grid image (located at ~/images/grid.png)
// @include		*
// @author		Grid Helper by Jason Garber (http://sixtwothree.org)
// ==/UserScript==

window.gridhelper = {
	isCtrl: false,
	
	init: function() {
		document.addEventListener( "keyup", function( e ) {
			if ( e.which == 17 ) {
				gridhelper.isCtrl = false;
			}
		}, true );
		
		document.addEventListener( "keydown", function( e ) {
			if ( e.which == 17 ) {
				gridhelper.isCtrl = true;
			}
			
			if ( gridhelper.isCtrl && e.which == 71 ) {
				if ( !document.getElementById( "__grid" ) ) {
					d = document.createElement( "div" );
					d.setAttribute( "id", "__grid" );
					d.setAttribute( "style", "background: url('http://" + window.location.hostname + "/images/grid.png') repeat-y 50% 0; height: " + document.height + "px; left: 0; position: absolute; top: 0; width: 100%; z-index: 16000000;" );

					document.body.appendChild( d );
				} else {
					document.body.removeChild( document.getElementById( "__grid" ) );
				}
			}
		}, true );
	}
};

window.gridhelper.init();

This is a Greasemonkey script for the Grid Helper bookmarklet I just posted. It does the same thing as the bookmarklet, but is operated with a keyboard shortcut of Ctrl+g.

So, to use:

1. Install Greasemonkey.
2. Install this userscript.
3. Drop a file into ~/images/grid.png.
4. Navigate to your site/app/whatever at something like http://localhost:3000/.
5. Press Ctrl+g and your grid should overlay the page.
6. Press Ctrl+g again and the grid will remove itself.

Feel free to modify this to your heart's content.