Greasemonkey script to show the current dimensions of the browser

When looking for a quick way to show the current dimensions of the browser window for some responsive development, I cobbled together this little Greasemonkey script.

The original code is from a stackoverflow response.

In the bottom right of the screen, it outputs: window width (browser width) x window height (browser height). The window width is the width of browser window and the browser width is the width of the rendered HTML page.

You’ll need to change the @include lines to match whatever domains/paths you’re working with.

/* Original code: http://stackoverflow.com/questions/14184447/firefox-extension-to-show-current-window-dimensions */
// ==UserScript==
// @name        Ruler
// @namespace   10am.ca
// @require     http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js
// @description add a little measurement thing in the bottom corner
// @grant       none
// @include     http://thewebsiteyouareworkingon.ca/*
// @include     http://anothersite.com/*
// @version     1
// ==/UserScript==
var MEASUREMENTS_ID = 'little_ruler_thing';
$("body").append('<div id="'+MEASUREMENTS_ID+'"></div>');
$("#"+MEASUREMENTS_ID).css({
	'position': 'fixed',
	'bottom': '0',
	'right': '0',
	'background-color': 'black',
	'color': 'white',
	'padding': '5px',
	'font-size': '10px',
	'opacity': '0.4'
});
getDimensions = function(){
	return $(window).width() + ' (' + $(document).width() + ') x ' + $(window).height() + ' (' + $(document).height() + ')';
}
$("#"+MEASUREMENTS_ID).text(getDimensions());
$(window).on("resize", function(){
	$("#"+MEASUREMENTS_ID).text(getDimensions());
});

Incidentally, this bit of script contains the proper way to include jQuery in your Greasemonkey scripts:

// @require     http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js