Agile Ajax

BJAX With Greasemonkey

Dietrich Kappe, Tuesday, July 18, 2006 @ 8:55 am

I've had a number of people write me wanting to know how to do BJAX (Browser Extension and AJAX) with Greasemonkey on Firefox. I thought I'd give a simple little example here. The example will show a small box in the top left corner of a google page. This box will display the weather in Chicago as served up by a Yahoo! RSS feed, refreshed every 30 seconds. Yes, yes, this isn't terribly useful, but that's not the point. Also, this is a quick hack. It won't work on IE or probably most versions of browsers.


www.google.com_search.png


OK, having dispensed with preliminaries, let's get started. First you'll need to install Greasemonkey. Once you've done that, download the example script here. You'll need to load it in a browser window and install it.


There are a couple of differences in programming Javascript in Greasemonkey as opposed to a regular browser environment. We'll only touch on a few of these here, but you should have a look at Dive Into Greasemonkey for a more complete treatment.


OK, the first step in our extension involves looking for a particular method:


if (typeof GM_xmlhttpRequest != 'function') {
return;



As you can probably guess, GM_xmlhttpRequest is a special version of XMLHttpRequest that allows you to access any remote site. It isn't present in all versions of Greasemonkey, so you have to check for it. Next, we check that we have the top window. We don't want the box showing up in IFrames.


if (window == top) {



The next bit looks pretty standard; we create a div, give a few of the elements id's and insert it at the beginning.


var mybox = document.createElement("div");

mybox.innerHTML = '<div id="bjax_box" style="margin: 0 auto 0 auto; ' +
'position:absolute; left:15px; top:15px; width:175px; opacity: .75; filter: alpha(opacity=75); z-index:100; ' +
'margin: 5px; padding: 5px; overflow: hidden; height: auto; ' +
'font-size: 8pt; font-weight: bold; font-family: arial, sans-serif; background-color: #ccffcc; ' +
'color: #000000;"> ' +
'BJAX in Action! <br/> Chicago weather: <br/> ' +
'<p id="bjax_weather"></p>' +
'</div>';

document.body.insertBefore(mybox, document.body.firstChild);



There remains the periodic call to GM_xmlhttpRequest. We parse the RSS XML and grab the second description. It's an example. In an actual app you would want to be a little more careful.


window.setInterval(function() {
GM_xmlhttpRequest({
method: 'GET',
url: 'http://xml.weather.yahoo.com/forecastrss?p=60602',
headers: {
'User-agent': 'Mozilla/4.0 (compatible) Greasemonkey',
'Accept': 'application/atom+xml,application/xml,text/xml',
},
onload: function(responseDetails) {
// convert string to XML object
var xmlobject = (new DOMParser()).parseFromString(responseDetails.responseText, "text/xml");
var condition = xmlobject.getElementsByTagName('description')[1];
var weather = document.getElementById('bjax_weather');
weather.innerHTML = condition.firstChild.nodeValue;
}
});
}, 30 * 1000);



A few quirks you may want to watch out for (see also this pitfalls articles):


  • When you get a DOM element in Greasemonkey, it will be a XPCNativeWrapper. That type doesn't have many properties you've come to expect, such as onclick. You can add event listeners using document.addEventListener('click',... instead.
  • The scope of functions and variables. Greasemonkey wraps your code in an anonymous functions, so you variables and functions are not available to other Javascript in the file. Use anonymous functions where you have to pass a function pointer.


Now that you've been through this little example, you may want to uninstall the example BJAX component. Who, after all, wants weather hanging over their google search?


One additional interesting feature of Greasemonkey is that once you've written your script, you can compile it into a Firefox extension.



Topics: , ,

agile ajax Agile Ajax

Comments: 1 so far

  1. The prerequisite test “if(!GM_xmlhttpRequest)” is more appropriately phrased as “if(typeof GM_xmlhttpRequest != ‘function’)”, since the former yields an exception, whereas the latter actually executes the return statement as your code flow suggests.

    Comment by Johan Sundström, Tuesday, August 1, 2006 @ 11:03 am

Leave a comment

Powered by WP Hashcash

About Pathfinder

  • We design and build extraordinary applications for companies looking to make the next great idea a reality.
  • learn more

Topics

Blogroll

WordPress

Comments about this site: info@pathf.com