Jetpack extension case study: Gmail email reminder

Firefox’s Jetpack extension case study: Gmail email reminder

There is a very good and practical function at the bottom of the Gtalk software, which is the Gmail email reminder function. The number of new unread emails in your Gmail will be updated regularly.

Just imagine how interesting it would be if we ported this feature to Firefox!

The first step is to display icons and data in the status bar

Through the article "How to Create a Jetpack Extension for Firefox", we can easily create:

jetpack.statusBar.append({
html: '<img src="http://mail.google.com/mail/images/favicon.ico"/><span id="count"></span>', //Gmail mail icon and unread Number of new messages
width: 55, //The width on the status bar is 55
onReady: function(widget) {
$("#count", widget).css({ //Add style to the number of unread new emails
cursor: "pointer",
paddingLeft:"4px",
fontFamily: "Tahoma, Arial, sans-serif",
verticalAlign: "top",
fontSize: "10px",
lineHeight:"18px",
});
}
});

The second step is to obtain Gmail data and update the number of unread new emails.

It can be obtained through the Gmail mail feed (login required): https://mail.google.com/mail/feed/atom

The fullcount tag in the feed source code is used to record the current number of unread new emails.

OK, first the data source is available. Next, we use the familiar Ajax technology to obtain the data and assign it to the specified element.

function update(widget) {
var widget = $(widget);
$.get(" https://mail.google.com/mail/feed/atom ", function(xml) {
var el = $(xml).find("fullcount"); // Node that records the number of unread new emails
if(el){
var newcount = parseInt(el.get(0).textContent);
widget.find("#count").text(newcount); //Assign to the specified element
} else { //If not logged in, display "Login"
widget.find("#count").text( "Login" );
}
});
}

We can also make some optimizations: for example, when the number of unread new emails is greater than the original number of emails, adding prompt information, etc.
The jetpack.notifications.show(options) method is used for prompt information. The options parameter has three attributes: title (String): the title of the notification; icon (URL): the URL of the notification icon; body (String): the subject content of the notification.

The optimized code is as follows:

function update(widget) {
var widget = $(widget),
notify = function(msg) { // Public method to define notifications
jetpack.notifications.show({
title: "Gmail",
body: msg,
icon: " http://mail.google.com/mail/images/favicon.ico "
});
};
$.get(" https://mail.google.com/mail/feed/atom ", function(xml) {
var el = $(xml).find("fullcount"); // Node that records the number of unread new emails
if(el){
var newcount = parseInt(el.get(0).textContent);
if(newcount > count) { // If the number of unread new emails is greater than the number of original emails, where does the prompt come from?
var sender = $(xml).find("name").get(0).textContent;
notify("New message from "+sender);
}
count = newcount;
widget.find("#count").text(count); //Assign to the specified element
} else { //If not logged in, prompt to log in
widget.find("#count").text( "Login" );
notify("Please login to Gmail");
}
});
}

Step 3: Set up scheduled update data

We set the data to be updated every 1 minute:

setInterval( function() { update(widget) }, 60*1000 );

Step 4: Set the link window after clicking the extension

$(widget).click(function() { //Set the link window after click expansion
jetpack.tabs.open(" http://mail.google.com ");
jetpack.tabs[ jetpack.tabs.length-1 ].focus();
});

jetpack.tabs is the tab object of the browser window, .open(url) is the method of opening a new browser window tab, and .focus() is the method of selecting this tab as the current tab.

OK, Firefox's Jetpack extension - Gmail email reminder, can be easily completed in four simple steps.

The entire code is as follows:

var count = 0;
function update(widget) {
var widget = $(widget),
notify = function(msg) { // Public method to define notifications
jetpack.notifications.show({
title: "Gmail",
body: msg,
icon: " http://mail.google.com/mail/images/favicon.ico "
});
};
$.get(" https://mail.google.com/mail/feed/atom ", function(xml) {
var el = $(xml).find("fullcount"); // Node that records the number of unread new emails
if(el){
var newcount = parseInt(el.get(0).textContent);
if(newcount > count) { // If the number of unread new emails is greater than the number of original emails, where does the prompt come from?
var sender = $(xml).find("name").get(0).textContent;
notify("New message from "+sender);
}
count = newcount;
widget.find("#count").text(count); //Assign to the specified element
} else { //If not logged in, prompt to log in
widget.find("#count").text( "Login" );
notify("Please login to Gmail");
}
});
}
jetpack.statusBar.append({
html: '<img src=" http://mail.google.com/mail/images/favicon.ico"/><span id="count"></span>', //Gmail mail icon and unread Number of new messages
width: 40, //The width of the status bar is 40, and a 3-digit width is reserved.
onReady: function(widget) {
$("#count", widget).css({ //Add style to the number of unread new emails
cursor: "pointer",
paddingLeft:"4px",
fontFamily: "Tahoma, Arial, sans-serif",
verticalAlign: "top",
fontSize: "10px",
lineHeight:"18px",
}); $(widget).click(function() { //Set the link window after click expansion
jetpack.tabs.open(" http://mail.google.com ");
jetpack.tabs[ jetpack.tabs.length-1 ].focus();
});
update(widget);
setInterval( function() {update(widget) }, 60*1000 );
}
});

Test Demo: http://www.planabc.net/lab/jetpack/gmail/

For the detailed API of Jetpack, you can read the API Reference tag section of the about:jetpack page.

The case source code comes from: https://jetpack.mozillalabs.com/demos/gmail-checker.js