Bandit Design

Version checking a Greasemonkey Script without AJAX

Lately I’ve been updating my Lighthouse++ script quite frequently. Every time I push a new version out, I have to attempt to notify everybody and post on my blog/twitter - this is a pain and some people are missing out on new or important features.

I looked into how to do some cross-site AJAX requests to check for a new version, but it really isn’t possible with a Greasemonkey script in Chrome, due to how Chrome manages its sandbox.

I tested a LOT of third party Javascript libraries that claimed to bypass any and all issues (with James Padolsey’s solution looking amazing) — but no dice, no matter what I tried.

I came up with an ingenious plan to use a PHP proxy hosted on my server, but access it via an image — if the image “loaded” then the script version was current — if not (a sneaky 404), it was out of date.

The script works like a charm, you can try the raw version here; anything other than (at the time of writing) 0.61 will cause a 404 error, which is then passed on to my script, and a NEW VERSION AVAILABLE message is displayed.

Below is the source code for my script — it simply references a 1x1 transparent PNG image, and a blank .txt file — very easy for anybody to set up (although note it will only work if your versions are numbers):

<?php
	// version files
	$file = 'version.txt';
	$image = 'version.png';
	$script = 'http://userscripts.org/scripts/show/81657';
	
	// check last modified date of version.txt, only do the version check every 6 hours max
	if($_GET['force'] || (time() - filemtime($file)) >= 21600) {
		
		// get contents of userscripts page
		$html = trim(strip_tags(file_get_contents($script)));
		
		// extract the version
		preg_match('|Version:\s+([0-9\.]+)\s*|', $html, $result);
		$version = trim($result[1]);
		
		// update version.txt
		$fo = fopen($file, 'w+');
		fwrite($fo, $version);
		fclose($fo);
		
	}
	
	// grab the version from the version file if we don't already have it
	if(!$version) $version = trim(file_get_contents($file));
	
	// compare it to the version we were provided
	if($version == $_GET['version']) {
		
		// same version, output a picture
		header('Content-Type: image/png', true);
		header('Content-Transfer-Encoding: binary');
		header('Content-Length: '.filesize($image), true);
		header("Cache-Control: no-cache, must-revalidate");
		header("Expires: Sat, 26 Jul 1997 05:00:00 GMT");
		
		readfile($image);
		exit;
		
	}
	else {
		
		// different version, 404
		header('HTTP/1.1 404 Not Found');
		exit;
		
	}
?>

With a super basic .htaccess file (but you don’t need this):

Options +FollowSymlinks
RewriteEngine On

RewriteRule version.png version.php [NC,QSA,L]

And the Javascript (jQuery) code looks something like this:

$("<img />").appendTo("body").bind("load", function() {
	// version up-to-date, everything is fine
	$(this).hide();
}).bind("error", function() {
	// version out of date!
	$("#lpp-advert").append(" — NEW VERSION AVAILABLE!");
	$(this).hide();
}).attr("src", "https://lab.bandit.co.nz/scripts/lighthouseplusplus/version.png?version=" + version);

You can try it, and my script out at http://userscripts.org/scripts/show/81657

Lighthouse++ Update

Have updated Lighthouse++ again, this time with more inline editing (and some performance improvements).

Grab it here: http://userscripts.org/scripts/show/81657

jQuery Wrap Not Working?

Are you trying to use .wrap() in jQuery only to find it isn’t working?

Something the docs don’t tell you is that you can only wrap elements that are attached to the DOM! Important.

Take for example:

$("<a href='#'>My Link</a>").wrap("<li></li>").appendTo("ul:first").click(function() { ... } ); // will not work

$("<a href='#'>My Link</a>").appendTo("ul:first").wrap("<li></li>").click(function() { ... } ); // will work fine!