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:
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");
}
});
}