Étude de cas de l'extension Jetpack de Firefox : rappel par e-mail Gmail
Il y a une fonction très intéressante et pratique au bas du logiciel Gtalk, qui est la fonction de rappel par e-mail Gmail. Le nombre de nouveaux e-mails non lus dans votre Gmail sera mis à jour régulièrement.
.png)
Imaginez à quel point ce serait intéressant si nous portions cette fonctionnalité sur Firefox !
La première étape consiste à afficher les icônes et les données dans la barre d'état
Grâce à l'article « Comment créer une extension Jetpack pour Firefox », nous pouvons facilement créer :
jetpack.statusBar.append({
html : '<img src="http://mail.google.com/mail/images/favicon.ico"/><span id="count"></span>', //Icône de messagerie Gmail et numéro non lu de nouveaux messages
width: 55, //La largeur de la barre d'état est de 55
onReady : fonction (widget) {
$("#count", widget).css({ //Ajouter du style au nombre de nouveaux emails non lus
curseur : "pointeur",
paddingGauche : "4px",
fontFamily : "Tahoma, Arial, sans-serif",
verticalAlign : "haut",
Taille de la police : "10px",
hauteur de la ligne : "18px",
});
}
});
La deuxième étape consiste à obtenir les données Gmail et à mettre à jour le nombre de nouveaux e-mails non lus.
Il peut être obtenu via le flux mail Gmail (connexion requise) : https://mail.google.com/mail/feed/atom
La balise fullcount dans le code source du flux est utilisée pour enregistrer le nombre actuel de nouveaux e-mails non lus.
OK, d'abord la source de données est disponible. Ensuite, nous utilisons la technologie Ajax familière pour obtenir les données et les attribuer à l'élément spécifié.
mise à jour de la fonction (widget) {
var widget = $(widget);
$.get(" https://mail.google.com/mail/feed/atom ", fonction (xml) {
var el = $(xml).find("fullcount"); // Nœud qui enregistre le nombre de nouveaux emails non lus
si(el){
var newcount = parseInt(el.get(0).textContent);
widget.find("#count").text(newcount); //Attribuer à l'élément spécifié
} else { //Si vous n'êtes pas connecté, affichez "Connexion"
widget.find("#count").text( "Connexion" );
}
});
}
Nous pouvons également procéder à quelques optimisations : par exemple, lorsque le nombre de nouveaux e-mails non lus est supérieur au nombre d'e-mails d'origine, en ajoutant des informations d'invite, etc.
La méthode jetpack.notifications.show(options) est utilisée pour les informations d'invite. Le paramètre options a trois attributs : title (String) : le titre de l'icône de notification (URL) : l'URL du corps de la notification (String) ; : le contenu de l'objet de la notification.
Le code optimisé est le suivant :
mise à jour de la fonction (widget) {
var widget = $(widget),
notify = function(msg) { // Méthode publique pour définir les notifications
jetpack.notifications.show({
titre : "Gmail",
corps : msg,
icône : " http://mail.google.com/mail/images/favicon.ico "
});
} ;
$.get(" https://mail.google.com/mail/feed/atom ", fonction (xml) {
var el = $(xml).find("fullcount"); // Nœud qui enregistre le nombre de nouveaux emails non lus
si(el){
var newcount = parseInt(el.get(0).textContent);
if(newcount > count) { // Si le nombre de nouveaux e-mails non lus est supérieur au nombre d'e-mails d'origine, d'où vient l'invite ?
var sender = $(xml).find("name").get(0).textContent;
notify("Nouveau message de "+expéditeur);
}
compte = nouveau compte ;
widget.find("#count").text(count); //Attribuer à l'élément spécifié
} else { //Si vous n'êtes pas connecté, invitez-vous à vous connecter
widget.find("#count").text( "Connexion" );
notify("Veuillez vous connecter à Gmail");
}
});
}
Étape 3 : Configurer les données de mise à jour planifiée
Nous définissons les données pour qu'elles soient mises à jour toutes les minutes :
setInterval( function() { update(widget) }, 60*1000 );
Étape 4 : Définissez la fenêtre de lien après avoir cliqué sur l'extension
$(widget).click(function() { //Définit la fenêtre de lien après l'expansion du clic
jetpack.tabs.open(" http://mail.google.com ");
jetpack.tabs[ jetpack.tabs.length-1 ].focus();
});
jetpack.tabs est l'objet onglet de la fenêtre du navigateur, .open(url) est la méthode d'ouverture d'un nouvel onglet de fenêtre de navigateur et .focus() est la méthode de sélection de cet onglet comme onglet actuel.
OK, l'extension Jetpack de Firefox - Rappel par e-mail Gmail, peut être facilement complétée en quatre étapes simples.
Le code complet est le suivant :
nombre de variables = 0 ;
mise à jour de la fonction (widget) {
var widget = $(widget),
notify = function(msg) { // Méthode publique pour définir les notifications
jetpack.notifications.show({
titre : "Gmail",
corps : msg,
icône : " http://mail.google.com/mail/images/favicon.ico "
});
} ;
$.get(" https://mail.google.com/mail/feed/atom ", fonction (xml) {
var el = $(xml).find("fullcount"); // Nœud qui enregistre le nombre de nouveaux emails non lus
si(el){
var newcount = parseInt(el.get(0).textContent);
if(newcount > count) { // Si le nombre de nouveaux e-mails non lus est supérieur au nombre d'e-mails d'origine, d'où vient l'invite ?
var sender = $(xml).find("name").get(0).textContent;
notify("Nouveau message de "+expéditeur);
}
compte = nouveau compte ;
widget.find("#count").text(count); //Attribuer à l'élément spécifié
} else { //Si vous n'êtes pas connecté, invitez-vous à vous connecter
widget.find("#count").text( "Connexion" );
notify("Veuillez vous connecter à Gmail");
}
});
}
jetpack.statusBar.append({
html : '<img src=" http://mail.google.com/mail/images/favicon.ico"/><span id="count"></span>', //Icône de messagerie Gmail et numéro non lu de nouveaux messages
width: 40, //La largeur de la barre d'état est de 40 et une largeur à 3 chiffres est réservée.
onReady : fonction (widget) {
$("#count", widget).css({ //Ajouter du style au nombre de nouveaux emails non lus
curseur : "pointeur",
paddingGauche : "4px",
fontFamily : "Tahoma, Arial, sans-serif",
verticalAlign : "haut",
Taille de la police : "10px",
hauteur de la ligne : "18px",
}); $(widget).click(function() { //Définit la fenêtre du lien après l'expansion du clic
jetpack.tabs.open(" http://mail.google.com ");
jetpack.tabs[ jetpack.tabs.length-1 ].focus();
});
mettre à jour(widget);
setInterval( function() {update(widget) }, 60*1000 );
}
});
Démo de test : http://www.planabc.net/lab/jetpack/gmail/
Pour l'API détaillée de Jetpack, vous pouvez lire la section Balise de référence de l'API de la page about:jetpack.
Le code source du cas provient de : https://jetpack.mozillalabs.com/demos/gmail-checker.js