If you liked my last Prism article, you’re in for some more Prism goodness with this one. I delve even deeper into custom add-ons to Prism apps, mainly scripts.

Anyway, I’m trying to use Twitter more (I know, I’m late), but really don’t find any of the methods very convenient. I don’t use my cell phone much, I don’t always have an IM client open, AIR isn’t for Linux yet so I can’t try any of those fancy pants AIR apps that use the twitter API, and using the website is just plain cumbersome. Prism to the rescue!

I’d thought about just loading up the mobile version of Twitter in Prism, but it didn’t look as nice. So I started with the regular version. First on my list was to remove the sidebar and top navigation to keep the page a reasonable size. Easy enough. With the help of the always-awesome Firebug, here’s the css I came up with:

#container {
width: 555px !important;
}
 
#side {
display:none !important;
}
 
#navigation {
display:none !important;
}

Now I didn’t want to have to refresh it all the time to see if there were any new tweets so I had to try out scripting. I’d tried it before but was unsuccessful. This time around I did more research. There seems to be a vacuum right now concerning Prism documentation and tutorials. Anyway here’s what I came up with:

function startup() {
    var appcontent = host.getBrowser();
    var oldId = null;
 
    var REFRESH_RATE = 3; // in minutes
 
    if(appcontent){
 
        appcontent.addEventListener("DOMContentLoaded", function(aEvent) {
 
            document = aEvent.originalTarget;
 
            appcontent.contentWindow.setTimeout(function(){
                appcontent.reload()
            }, REFRESH_RATE * 60 * 1000);
 
            var newId = document.getElementsByTagName('tr')[0].getAttribute('id');
 
            if (newId !== oldId && oldId !== null) {
                host.showAlert(null, 'New Tweets', 'You have new tweets!');
            }
 
            oldId = newId;
 
        }, true);
 
    }
 
}

Now for a little explanation. Anything in startup() magically gets called when Prism is loaded. That’s the easy part. The function host.getBrowser() returns an XUL reference that we can attach events to. After I initialize a couple variables, I do just that, attaching a dom ready event. In that function I get document somehow (I just copied that from a bundle someone else made), and then set a function to be called in 3 minutes that will reload the page. After that, I just check to see if there is a new tweet and display a message if there is using the provided showAlert().

That’s it. If you want to try out the app yourself, just make a Twitter app with Prism, find the folder and put the css in a file called webapp.css and the javascript in a file called webapp.js or you can try installing this bundle I made with everything included (you still need Prism). Also, I’m not entirely sure that the messaging works as I have no friends on Twitter to test it with

Helpful Resources:

• Prism Scripting
• Prism Forum