Fallstudie zur Jetpack-Erweiterung von Firefox: E-Mail-Erinnerung an Gmail
Am Ende der Gtalk-Software gibt es eine sehr gute und praktische Funktion, nämlich die Gmail-E-Mail-Erinnerungsfunktion. Die Anzahl neuer ungelesener E-Mails in Ihrem Gmail wird regelmäßig aktualisiert.
.png)
Stellen Sie sich vor, wie interessant es wäre, wenn wir diese Funktion auf Firefox portieren würden!
Der erste Schritt besteht darin, Symbole und Daten in der Statusleiste anzuzeigen
Durch den Artikel „So erstellen Sie eine Jetpack-Erweiterung für Firefox“ können wir ganz einfach Folgendes erstellen:
jetpack.statusBar.append({
html: '
width: 55, //Die Breite der Statusleiste beträgt 55
onReady: function(widget) {
$("#count", widget).css({ //Stil zur Anzahl ungelesener neuer E-Mails hinzufügen
Cursor: „Zeiger“,
paddingLeft:"4px",
Schriftfamilie: „Tahoma, Arial, Sans-Serif“,
VerticalAlign: „oben“,
Schriftgröße: „10px“,
lineHeight:"18px",
});
}
});
Der zweite Schritt besteht darin, Gmail-Daten abzurufen und die Anzahl ungelesener neuer E-Mails zu aktualisieren.
Es kann über den Gmail-Mail-Feed abgerufen werden (Anmeldung erforderlich): https://mail.google.com/mail/feed/atom
Das fullcount-Tag im Feed-Quellcode wird verwendet, um die aktuelle Anzahl ungelesener neuer E-Mails zu erfassen.
OK, zunächst ist die Datenquelle verfügbar. Als nächstes nutzen wir die bekannte Ajax-Technologie, um die Daten abzurufen und sie dem angegebenen Element zuzuordnen.
Funktionsaktualisierung(Widget) {
var widget = $(widget);
$.get(" https://mail.google.com/mail/feed/atom ", function(xml) {
var el = $(xml).find("fullcount"); // Knoten, der die Anzahl ungelesener neuer E-Mails aufzeichnet
if(el){
var newcount = parseInt(el.get(0).textContent);
widget.find("#count").text(newcount); // Dem angegebenen Element zuweisen
} else { //Wenn nicht angemeldet, wird „Login“ angezeigt.
widget.find("#count").text( "Login" );
}
});
}
Wir können auch einige Optimierungen vornehmen: zum Beispiel, wenn die Anzahl der ungelesenen neuen E-Mails größer ist als die ursprüngliche Anzahl der E-Mails, indem wir Eingabeaufforderungsinformationen hinzufügen usw.
Die Methode jetpack.notifications.show(options) wird für Eingabeaufforderungsinformationen verwendet. Der Optionsparameter hat drei Attribute: Titel (String): der Titel des Benachrichtigungssymbols (String); : der Betreffinhalt der Benachrichtigung.
Der optimierte Code lautet wie folgt:
Funktionsaktualisierung(Widget) {
var widget = $(widget),
notify = function(msg) { // Öffentliche Methode zum Definieren von Benachrichtigungen
jetpack.notifications.show({
Titel: „Gmail“,
Körper: Nachricht,
Symbol: „ http://mail.google.com/mail/images/favicon.ico “
});
};
$.get(" https://mail.google.com/mail/feed/atom ", function(xml) {
var el = $(xml).find("fullcount"); // Knoten, der die Anzahl ungelesener neuer E-Mails aufzeichnet
if(el){
var newcount = parseInt(el.get(0).textContent);
if(newcount > count) { // Wenn die Anzahl der ungelesenen neuen E-Mails größer ist als die Anzahl der ursprünglichen E-Mails, woher kommt dann die Aufforderung?
var sender = $(xml).find("name").get(0).textContent;
notify("Neue Nachricht von "+sender);
}
count = newcount;
widget.find("#count").text(count); // Dem angegebenen Element zuweisen
} else { //Wenn Sie nicht angemeldet sind, werden Sie zur Anmeldung aufgefordert
widget.find("#count").text( "Login" );
notify("Bitte melden Sie sich bei Gmail an");
}
});
}
Schritt 3: Richten Sie geplante Aktualisierungsdaten ein
Wir stellen die Daten so ein, dass sie alle 1 Minute aktualisiert werden:
setInterval( function() { update(widget) }, 60*1000 );
Schritt 4: Richten Sie das Linkfenster ein, nachdem Sie auf die Erweiterung geklickt haben
$(widget).click(function() { //Legen Sie das Linkfenster nach der Klickerweiterung fest
jetpack.tabs.open(" http://mail.google.com ");
jetpack.tabs[ jetpack.tabs.length-1 ].focus();
});
jetpack.tabs ist das Tab-Objekt des Browserfensters, .open(url) ist die Methode zum Öffnen eines neuen Browserfenster-Tabs und .focus() ist die Methode zum Auswählen dieses Tabs als aktuellen Tab.
OK, die Jetpack-Erweiterung von Firefox – Gmail-E-Mail-Erinnerung – kann problemlos in vier einfachen Schritten abgeschlossen werden.
Der gesamte Code lautet wie folgt:
Var-Anzahl = 0;
Funktionsaktualisierung(Widget) {
var widget = $(widget),
notify = function(msg) { // Öffentliche Methode zum Definieren von Benachrichtigungen
jetpack.notifications.show({
Titel: „Gmail“,
Körper: Nachricht,
Symbol: „ http://mail.google.com/mail/images/favicon.ico “
});
};
$.get(" https://mail.google.com/mail/feed/atom ", function(xml) {
var el = $(xml).find("fullcount"); // Knoten, der die Anzahl ungelesener neuer E-Mails aufzeichnet
if(el){
var newcount = parseInt(el.get(0).textContent);
if(newcount > count) { // Wenn die Anzahl der ungelesenen neuen E-Mails größer ist als die Anzahl der ursprünglichen E-Mails, woher kommt dann die Aufforderung?
var sender = $(xml).find("name").get(0).textContent;
notify("Neue Nachricht von "+sender);
}
count = newcount;
widget.find("#count").text(count); // Dem angegebenen Element zuweisen
} else { //Wenn Sie nicht angemeldet sind, werden Sie zur Anmeldung aufgefordert
widget.find("#count").text( "Login" );
notify("Bitte melden Sie sich bei Gmail an");
}
});
}
jetpack.statusBar.append({
html: 'http://mail.google.com/mail/images/favicon.ico"/>
width: 40, // Die Breite der Statusleiste beträgt 40 und eine 3-stellige Breite ist reserviert.
onReady: function(widget) {
$("#count", widget).css({ //Stil zur Anzahl ungelesener neuer E-Mails hinzufügen
Cursor: „Zeiger“,
paddingLeft:"4px",
Schriftfamilie: „Tahoma, Arial, Sans-Serif“,
VerticalAlign: „oben“,
Schriftgröße: „10px“,
lineHeight:"18px",
}); $(widget).click(function() { //Legen Sie das Linkfenster nach der Klickerweiterung fest
jetpack.tabs.open(" http://mail.google.com ");
jetpack.tabs[ jetpack.tabs.length-1 ].focus();
});
aktualisieren(Widget);
setInterval( function() {update(widget) }, 60*1000 );
}
});
Testdemo: http://www.planabc.net/lab/jetpack/gmail/
Für die detaillierte API von Jetpack können Sie den Abschnitt „API-Referenz-Tag“ auf der Seite „about:jetpack“ lesen.
Der Fallquellcode stammt von: https://jetpack.mozillalabs.com/demos/gmail-checker.js