We’ve got a new version of the LGF Pages bookmarklet today, with better browser compatibility and a new feature: when you open the bookmarklet on any page at the NPR website that has a “download” link for their MP3 audio, the bookmarklet will sense its presence and automatically create the code to embed that audio in your post.

Quite a few of NPR’s pages have this audio download link - here’s one, from All Things Considered: Pat Metheny and John Zorn: A Vivid Sound World : NPR. Opening the bookmarklet on that page will embed this audio player:

To install the new version of the bookmarklet, first remove the old one from your browser’s bookmarks bar (by right-clicking it, then choosing “Delete”), then drag that big button labeled “Create a Page” to your bookmarks bar in its place.

If you hover over the “Create a Page” button, a popup message gives you directions on installing it, and also shows the time it was last updated and the current version number:

You can see which version of the bookmarklet you have installed by opening it; the version number is now shown at the top right of the window, under the Category popup menu.

Troubleshooting: if you click the bookmarklet and nothing happens, it’s probably because your browser is set to block pop-up windows. To use the bookmarklet, you’ll have to turn off this setting in your browser’s preferences.

For those among us who speak Javascript, here’s the source code for the bookmarklet:

(function() {
	function esc(s) {
		return escape(s).replace(/\+/ig, '%252B');
	}
	function postPage() {
		var api = 'http://littlegreenfootballs.com/api/0.2/postRegex.json',
			opts = {
				url: api
			},
			ff = navigator.userAgent.match(/Firefox\/(.*)$/);
		if (ff && ff.length > 1 && ff[1] < 21) {
			opts = {
				url:			api + 'p',
				jsonpCallback:	'lgf_api',
				dataType:		'jsonp'
			};
		}					
		jQuery.ajax(opts).done(function(lgf) {
			var v = '1.0.0',
				f = a = q = w = '',
				u = esc(location.href),
				d = document,
				t = esc(d.title),
				s = esc((d.selection) ? d.selection.createRange().text : d.getSelection()),
				ob = jQuery('iframe').filter(function() {
					return this.src.match(RegExp(lgf.regex.embed, 'i'));
				});
			if (ob.length && !u.match(RegExp(lgf.regex.sites, 'i'))) {
				f = esc(ob.eq(0).attr('src'));
			}
			if (u.match(/www\.npr\.org/i)) {
				ob = jQuery('a.download');
				if (ob.length) {
					a = esc(ob.eq(0).attr('href').split('?')[0]);
				}
			}
			q = (
				'u=' + u +
				'&t=' + t +
				'&f=' + f +
				'&a=' + a +
				'&s=' + s +
				'&v=' + v
			);
			w = (
				'width=670,' +
				'height=820,' +
				'scrollbars=1,' +
				'status=1,' +
				'menubar=1,' +
				'location=1,' +
				'resizable=1'
			);
			window.open('http://littlegreenfootballs.com/weblog/lgf-postpage.php?' + q, '_blank', w);
		});
	}
	var jqVersion = '1.9.1', d = document;
	if (window.jQuery === undefined || window.jQuery.fn.jquery < jqVersion) {
		var done = false, s = d.createElement('script');
		s.src = '//ajax.googleapis.com/ajax/libs/jquery/' + jqVersion + '/jquery.min.js';
		s.onload = s.onreadystatechange = function(){
			if (!done && (!this.readyState || this.readyState == 'loaded' || this.readyState == 'complete')) {
				done = true;
				jQuery.noConflict();
				postPage();
			}
		};
		d.getElementsByTagName('head')[0].appendChild(s);
	} else {
		postPage();
	}
})();

And this is what it looks like after compression with Closure Compiler; this is what you actually install as a bookmarklet:

(function(){function c(c){return escape(c).replace(/\+/ig,"%252B")}function g(){var b={url:"http://littlegreenfootballs.com/api/0.2/postRegex.json"},d=navigator.userAgent.match(/Firefox\/(.*)$/);d&&(1d[1])&&(b={url:"http://littlegreenfootballs.com/api/0.2/postRegex.jsonp",jsonpCallback:"lgf_api",dataType:"jsonp"});jQuery.ajax(b).done(function(b){var d=a=q=w="",h=c(location.href),e=document,g=c(e.title),e=c(e.selection?e.selection.createRange().text:e.getSelection()),f=jQuery("iframe").filter(function(){return this.src.match(RegExp(b.regex.embed, "i"))});f.length&&!h.match(RegExp(b.regex.sites,"i"))&&(d=c(f.eq(0).attr("src")));h.match(/www\.npr\.org/i)&&(f=jQuery("a.download"),f.length&&(a=c(f.eq(0).attr("href").split("?")[0])));q="u="+h+"&t="+g+"&f="+d+"&a="+a+"&s="+e+"&v=1.0.0";w="width=670,height=820,scrollbars=1,status=1,menubar=1,location=1,resizable=1";window.open("http://littlegreenfootballs.com/weblog/lgf-postpage.php?"+q,"_blank",w)})}var k=document;if(void 0===window.jQuery||"1.9.1">window.jQuery.fn.jquery){var l=!1,b=k.createElement("script"); b.src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js";b.onload=b.onreadystatechange=function(){if(!l&&(!this.readyState||"loaded"==this.readyState||"complete"==this.readyState))l=!0,jQuery.noConflict(),g()};k.getElementsByTagName("head")[0].appendChild(b)}else g()})();

Tech details: I can hardly believe I’m actually browser-sniffing in this code, but believe it or not it’s necessary in this case because Firefox versions before 21 had a bug in the way they handled a cross-domain protocol known as CORS. Firefox versions 20 and below would not report any error, but the call would simply fail to return anything.

So the only way to resolve this is to test whether the browser is Firefox. If it is, and it’s older than version 21, the bookmarklet falls back on the JSONP method to call the LGF API.

The CORS and JSONP methods are functionally equivalent for what I’m doing in this bookmarklet, but JSONP’s main limitation is that you can only use it with GET requests — you can’t use it for POSTing data.

The moral of the story: upgrade to Firefox 21 — it fixes bugs you didn’t even know you had!

If you have your browser’s pop-up blocking enabled, you’ll now see a message politely asking you to turn it off in order to use the LGF Pages bookmarklet, instead of, well, nothing.