A new type of “Browser Customization” tool started to be a real developing tool for addons in Mozilla Firefox.
Mozilla Labs released the version 0.7 of Jetpack!

I will not explain how to use and how to install it (you could even watch video tutorial on the website) but i will show a little example of it.

Once you installed Jetpack, a special tab (about:jetpack) will appear with several tabs: a smart description, a list of installed Jetpack addons, a developing window, tutorial with some demos, memory usage monitor and api tutorial. In tutorial tab there are examples about scripting under this API but not all are working..

Anyway, there is a script that is checking every minute how many unread mails you have in your gmail account and it shows an icon on your mozilla status bar. I edited it a little bit and now it will show a toast notification if new mails arrived. Here the code:

var oldcount = 0;
var yenivar = false;
function GmailNotifier(doc){
 $(doc).click( this.goToInbox );
 this.update( doc );
 var sd = this;
 setInterval( function(){
 sd.update(doc);
 }, 60*1000 ); //requesting time
}

GmailNotifier.prototype = {
 goToInbox: function(){
 jetpack.tabs.open("http://mail.google.com"); //how to open a new tab
 jetpack.tabs[ jetpack.tabs.length-1 ].focus(); //and how to focus on it
 },

 update: function(doc){
 var url = "http://mail.google.com/mail/feed/atom";
 doc = $(doc);
 $.get( url, function(xml){
 var el = $(xml).find("fullcount"); // Unread message count

 if( el ){
 var count = el.get(0).textContent;
 if(oldcount<count){
 yenivar = true;
 oldcount = count;
 }
 else
 yenivar = false;
 doc.find("#count").text( count );
 if(yenivar)
 jetpack.notifications.show('You got a Mail!'); //this displays the toast notification
 }
 else{
 doc.find("#count").text( "Login" );
 }
 });
 }
}

//with the following instruction it appends html code to status bar
//passing this json object to jetpack.statusBar.append method

jetpack.statusBar.append({
 html: '<img src="http://mail.google.com/mail/images/favicon.ico"><span id="count"></span>',
 onReady: function(doc){
 var gmail = new GmailNotifier(doc);
 $("#count", doc).css({
 position: "absolute",
 left: 4, top: 8,
 fontSize: "10px",
 cursor: "pointer",
 backgroundColor: "rgba(255,255,255,.8)"
 });
 },
 width: 20
});

//end

It’s so easy to test a custom script like this (just click on “try out this code” button under your developing window) but be careful on endless loop!!

Keep studying this API…

Do you need to store latitude/longitude coordinates of an address, or show a little input to choose a point in Google Maps? Here is a little solution to this problem: extend the TextBox to interact with Google Maps!

read my full post at http://www.codeproject.com/KB/custom-controls/gmapinput.aspx