Topic Archive: Greasemonkey

BJAX With Greasemonkey for Firefox and IE

Dietrich Kappe, Tuesday, August 1, 2006 @ 9:00 am

A few weeks ago I put together a BJAX example using Greasemonkey (BJAX = Browser Extensions and AJAX). The idea behind BJAX, of course, is that you can use AJAX widgets on third party sites and do cross domain scripting with ease. Two examples of BJAX apps are Book Burro,

which will get you book prices from competing retailers, and MyStickies,

Which will let you put stickies on pretty much any web site and use them on any computer where you have the MyStickies plugin installed. These BJAX applications go quite a bit beyond the original intent of Greasemonkey. They don't just enhance a few link but rather let you insert little mini-applications into someone else's webapp. This is potentially very disruptive to site owners, as they can no longer control their message. Amazon and Barnes and Noble can't be happy that people can seamlessly comparison shop, and the upcoming shareable feature of MyStickies could reduce the ability of community sites to moderate their own content.

My own BJAX application was built just for demo purposes in response to all the people who asked for a concrete example and thus wasn't particularly useful. It put the current weather in downtown Chicago, updated every minute, in a translucent box and floated it over the google.com search page. I decided to update it so it worked both with Firefox and IE and could run in the Greasemonkey clone for IE, Turnabout (get the advanced version, otherwise you won't be able to load your own scripts). The new, updated script can be found here. Three things have changed. Two of the changes are merely dealing with cross browser xml parsing and event handling. The third change is that clicking on the box now will toggle it from maximized to minimized.

Next steps are to port a client side AJAX framework so it uses GM_xmlhttpRequest, can handle being loaded after the page loads in Greasemonkey's sandbox, and doesn't have namespace conflicts with other AJAX frameworks. The mind races. Could GWT be adapted to build BJAX applications?

One potential issue with Greasemonkey and BJAX is that Greasemonkey runs after the page has loaded and all of the page's Javascript has run. What will happen with a true AJAX application that controls its DOM much more closely. Could our inserted DIV get deleted or munged? Should Greasemonkey fire after every DOM update or XMLHttpRequest?

Update 1: Johan Sundström takes me to task for being lazy. I've changed the test for GM_xmlhttpRequest to

typeof GM_xmlhttpRequest != 'function'

Technorati : GM_xmlhttpRequest, bjax, firefox, greasemonkey, ie, javascript, turnabout

• Digg
• Reddit
• del.icio.us

Comments (1)

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.

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:

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.

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

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.

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.

• Digg
• Reddit
• del.icio.us

Comments (1)

agile ajax

Firefox Extensions and AJAX - A Model for Web 2.0?

Dietrich Kappe, Thursday, July 13, 2006 @ 9:00 am

Let's face it, cross site AJAX is a real pain. If you're going to provide your components as a service, sort of like Google maps, you're task is not impossible yet still challenging. If you want to mash up your app with other services at the browser level, you've got to proxy those services. Put any way, it's a pain. How to simplify creating truly powerful, cross-site AJAX apps?

Greasemonkey showed the way, demonstrating how you could manipulate pages with Javascript. Book Burro was one of the first AJAX/Greasemonkey hybrids that allowed you to search for a book at your favorite online book merchant, then click on a semi-transparent drop down menu and see book prices at competing retailers. The magic of AJAX! Book Burro has since made the transition from Greasemonkey script to Firefox extension in its own right.

Another example of this curious Firefox Extension/AJAX hybrid caught my eye the other day: MyStickies. This extension will allow you to insert AJAX-DIV stickies onto any web page. The extension handles this insertion and also includes a Javascript library via a Javascript file from mystickies.com and another via chrome://mystickies/ for the behavior.

The sticky location is persisted to the mystickies site where you can also use a webapp to search, manage, etc., your stickies. It's a direct manipulation bookmark that doesn't reside just on your local computer.

Now I happen to think mystickies is pretty cool, especially if they implement some of the features on their roadmaps, like sticky sharing (how web2.0!). But what interests me here is the application architecture. Firefox Extension plus AJAX = a service that can be applied across other web sites. There is clearly a limit to this opportunity -- you have to really like a service and truly, how many of us are willing to keep 20 extensions running, each of which hogs a piece of browser toolbar realestate? Many of these players are already planning IE, Safari and Opera ports.

What shall we call this thing? Browser Extensions and AJAX? BEJAX?

• Digg
• Reddit
• del.icio.us

Comments (9)

agile ajax

Greasemonkey Tricks for AJAX Debugging

Dietrich Kappe, Sunday, July 9, 2006 @ 9:00 am

This is an old post that shows off a AJAX debugging tool written using Greasemonkey. It's still an interesting idea, but what is perhaps most useful is the long trail of comments that make reference to all sorts of other useful tools such as LiveHTTPHeaders.

• Digg
• Reddit
• del.icio.us

Comments (1)

agile ajax