gistfile1.js

var id = 100358;
var width = 220;

jetpack.statusBar.append({
	html: (<><![CDATA[
		<style type="text/css">
			#so-statusbar {
				font-family: Tahoma;
				font-size: 11px;
				height: 22px;
				margin-left: -50px;
				-moz-appearance: statusbar;
				padding-left: 50px;
			}

			#so-statusbarpanel {
				height: 18px;
				line-height: 17px;
				-moz-appearance: statusbarpanel;
				padding-left: 4px;
				padding-right: 4px;
			}

			.badge1 {
				color: #fc0;
				font-size: 120%;
				margin-left: 3px;
			}

			.badge2 {
				color: #c0c0c0;
				font-size: 120%;
				margin-left: 3px;
			}

			.badge3{
				color: #c96;
				font-size: 120%;
				margin-left: 3px;
			}

			.name {
				background: url(http://stackoverflow.com/favicon.ico) no-repeat;
				color: #07c;
				display: inline-block;
				font-weight: bold;
				padding-left: 20px;
				text-decoration: none;
			}

			.rep {
				color: #444;
				font-weight: bold;
			}
		</style>

		<div id="so-statusbar">
			<div id="so-statusbarpanel">
				<a class="name" target="_blank"></a>
				<span class="rep"></span>
				<span class="badges"></span>
			</div>
		</div>
	]]></>).toString(),

	width: width,

	onReady: function(document) {
		function update() {
			$.getJSON(url, function(data) {
				$name.text(data.displayName);
				$rep.text(data.reputation);
				$badges.html(data.badgeHtml)
			});
		}

		var url = "http://stackoverflow.com/users/flair/" + id + ".json";
		var $panel = $("#so-statusbarpanel", document);
		var $name = $panel.find(".name");
		var $rep = $panel.find(".rep");
		var $badges = $panel.find(".badges");

		$panel.find(".name").attr("href", "http://stackoverflow.com/users/" + id);

		update();

		setInterval(function() {
			update();
		}, 60000);
	}
});