Here's a new example script that does work with the latest Outfox 0.3.5 release. Instead of polluting the example with all the complications of navigating the GMail DOM, I've picked a much simpler target. This script simply speaks the number of major sections (level 2 headings) in a Wikipedia article when the page loads. It's not as sexy, but the code is much easier to understand.

To try this script, make sure you have the Greasemonkey 0.8 and Outfox 0.3.5 extensions installed on Firefox 3.0 or 3.5. Then visit the following link to have GM install the script: citation_announcer.user.js.

// ==UserScript==
// @name Sections count
// @namespace http://www.mindtrove.info/
// @description Speaks the number of h2 sections in a Wikipedia article
// @include http://*.wikipedia.org/wiki/*
// @require http://www.json.org/json2.js
// @require http://outfox.googlecode.com/svn/trunk/js/outfox.js
// ==/UserScript==
 
// number of major sections
var sections = 0;
 
function onOutfoxAudioInit(response) {
    // say the number of main sections
    outfox.audio.say(sections + ' main sections');
    // return the parameter for other outfox deferred callbacks
    return response;
}
 
function onOutfoxInit(version) {
    var content = document.getElementById('bodyContent');
    // count the number of main sections
    sections = content.getElementsByTagName('h2').length;
    // take one back for the TOC heading if it's present
    if(document.getElementById('toc')) {
        --sections;
    }
    // start the outfox audio service
    var def = outfox.startService('audio');
    def.addCallback(onOutfoxAudioInit);
    // return the parameter for other outfox deferred callbacks
    return version;
}
 
function onDOMContentLoaded() {
    // create a node for outfox use
    var div = document.createElement('div');
    document.body.appendChild(div);
    // initialize outfox
    var def = outfox.init(div, JSON.stringify, JSON.parse);
    def.addCallback(onOutfoxInit);
}
 
// this event triggers execution of the GM script
onDOMContentLoaded();

The result is Spaceship!, a JavaScript game for Firefox built using Creative Commons licensed music, sound, speech, and graphics; the Dojo toolkit; and the Outfox add-on. In the primary portion of the game, the player fires shots at a grid of tiles trying to hit enemy ships. When the player runs out of ammo, he or she plays a set of minigames in an attempt to earn more shots. Of course, hazards and bonuses abound to keep things interesting.

A text description is nice, but you're better off watching the gameplay video below to really understand what I'm jabbering about. Or, better yet, grab Outfox and Firefox 3 and play it yourself online at http://spaceship.mindtrove.info.

What a great exercise this turned out to be!  The payoff has been manyfold:

1. I learning a ton more about Dojo and writing custom widgets.
2. I developed some interesting MVC techniques for aural+visual event driven apps in Dojo. I hope to blog about these.
3. I built some nice, reusable Dojo components for future browser games.
4. I got to show off client-side music, sound, and speech in Firefox with pure JS. Maybe this will spur development of other audio apps?
5. I drummed up some interest in extending Spaceship! with new minigames. Hopefully more coming soon.
6. My wife was entertained. Yes, she will actually ask to play the game if she sees me working on it.
7. I had lots of teachers ask when the game will be online at Maze Day. Well, here it is, a month later.
8. And, most importantly, a steady stream of kids (and adults) got to play it at Maze Day. Hopefully even more can enjoy it now online.

If you try it out, leave a comment. It's new, there are bugs, and there is room for improvement. But anything you report will help in making the game better.

I owe many thanks to the artists who made their wonderful images, songs, and sounds available under open licenses. Their names appear in the Credits section off the main game menu. Be sure to check them out.

Oh, and of course the game code itself is BSD-licensed. Grab the code from http://svn.mindtrove.info/spaceship http://github.com/parente/spaceship if you're feeling adventurous.

Can you remember a time when the title of this blog post might have landed me in a straight jacket? Can you believe that was just a few short years ago? Yea, I can't either.

Anyway, Gary's post Outfox: speech, sound, and more for Firefox talks about a new Firefox extension. He's using it to create cross-platform, self-voicing Web apps for kids with disabilities using a pure JS API. He hopes to extend his work to support alternative input devices such as game pads and switches as the Outfox extension matures and grows more flexible.

One of the other potential uses listed on the Outfox homepage is Adding new I/O to web sites with Greasemonkey. Interesting. It's one thing to include Outfox explicitly in a page, but can it possibly work when injected by GM? What about for a complex app like Gmail with multiple iframes, dynamic changes, refreshing, etc.?

To learn about Outfox (and for fun), I decided to write a quick GM script for Gmail that announces the senders and times of new messages (bold items) in the inbox. (I would have done subject and summary too, but Outfox 0.1.0 appears to have some unicode issues and balked at some of the Gmail separator characters. Less is more at this point.) The script makes the announcement when the Gmail interface first loads, any time Gmail automatically refreshes its inbox view, or when the user clicks the refresh link to check for new mail. It is smart enough to announce a given message only once, however, so you don't hear the same message over and over again on each refresh.

Yes. It does actually work.

To try this script, make sure you have the Greasemonkey 0.8 and Outfox 0.1 extensions installed on Firefox 3. (Or use the latest available version of each.) Then visit the following link to have GM install the script: gmail_announcer.user.js.

For reference, the entire script is listed below:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95

// ==UserScript==
// @name Gmail Announcer
// @namespace http://www.mindtrove.info/
// @description Speaks new Gmail inbox messages using Outfox
// @include https://mail.google.com/mail/*
// @include http://mail.google.com/mail/*
// @require http://outfox.googlecode.com/svn/trunk/js/outfox.js
// ==/UserScript==
 
var need_say = null;
var ids = {};
 
function sayMessages(msgs) {
    if(!outfox.defaults.config) {
	// outfox really needs a better way to detect ready ...
	need_say = msgs;
	return false;
    }
 
    var header = 'New messages';
    for(var id in msgs) {
	// say all messages
	var msg = msgs[id];
	var segs = msg.split('»');
	var sender = segs[0];
	var time = segs[1].slice(segs[1].search('…')+2);
	if(header) {
	    outfox.say(header);
	    header = null;
	}
	outfox.say(sender + ' at ' + time);
    }
    return true;
}
 
function onOutfoxReady() {
    if(need_say) {
	// say anything already queued
	sayMessages(need_say);
	ids = need_say;
	need_say = null;
    }
}
 
function onTableChange(event) {
    var div = event.target;
    var trs = div.getElementsByTagName('tr');
 
    var count = 0;
    var new_ids = {};
    var curr_ids = {};
    for(var i=0; i < trs.length; i++) {
	var tr = trs[i];
	if(tr.innerHTML.search('&lt;b&gt;') != -1) {
	    // marked as a new message
	    if(ids[tr.id] == undefined) {
		// never announced
		new_ids[tr.id] = tr.textContent;
		++count;
	    }
	    // curr is announced + new
	    curr_ids[tr.id] = tr.textContent;
	}
    }
 
    // report if we can
    if(sayMessages(new_ids)) {
	ids = curr_ids;
    } 
}
 
function onDocumentChange(event) {
    if(event.target.tagName == 'DIV') {
	var div = event.target;
	var tables = div.getElementsByTagName('table');
	for(var i in tables) {
	    var table = tables[i];
	    if(table.id != '' && !table.getAttribute('role')) {
		// watch just table changes from now on
		var div = table.parentNode.parentNode;
		div.addEventListener('DOMNodeInserted', onTableChange, false);
		document.removeEventListener('DOMNodeInserted', 
					     onDocumentChange, false);
		// start outfox
		var div = document.createElement('div');
		document.body.appendChild(div);
		outfox.init(div, onOutfoxReady);
		// kick off initial read manually
		onTableChange({'target' : table.parentNode});
	    }
	}
    }
}
 
document.addEventListener('DOMNodeInserted', onDocumentChange, false);