Studi kasus ekstensi Jetpack Firefox: pengingat email Gmail
Terdapat fungsi yang sangat bagus dan praktis di bagian bawah software Gtalk, yaitu fungsi pengingat email Gmail. Jumlah email baru yang belum dibaca di Gmail Anda akan diperbarui secara berkala.
.png)
Bayangkan betapa menariknya jika kita mem-porting fitur ini ke Firefox!
Langkah pertama adalah menampilkan ikon dan data di status bar
Melalui artikel “Cara Membuat Ekstensi Jetpack untuk Firefox”, kita dapat dengan mudah membuat:
jetpack.statusBar.append({
html: '<img src="http://mail.google.com/mail/images/favicon.ico"/><span id="count"></span>', //Ikon email Gmail dan Nomor yang belum dibaca pesan baru
lebar: 55, //Lebar pada bilah status adalah 55
siap: fungsi(widget) {
$("#count", widget).css({ //Tambahkan gaya ke jumlah email baru yang belum dibaca
kursor: "penunjuk",
paddingKiri:"4px",
fontFamily: "Tahoma, Arial, sans-serif",
Perataan vertikal: "atas",
Ukuran font: "10 piksel",
tinggi baris:"18px",
});
}
});
Langkah kedua adalah mendapatkan data Gmail dan memperbarui jumlah email baru yang belum dibaca.
Itu dapat diperoleh melalui umpan email Gmail (diperlukan login): https://mail.google.com/mail/feed/atom
Tag fullcount di kode sumber feed digunakan untuk mencatat jumlah email baru yang belum dibaca.
Oke, pertama sumber datanya sudah tersedia. Selanjutnya, kita menggunakan teknologi Ajax yang familiar untuk memperoleh data dan menetapkannya ke elemen tertentu.
pembaruan fungsi(widget) {
varwidget = $(widget);
$.mendapatkan(" https://mail.google.com/mail/feed/atom ", fungsi(xml) {
var el = $(xml).find("fullcount"); // Node yang mencatat jumlah email baru yang belum dibaca
jika(el){
var hitungan baru = parseInt(el.get(0).textContent);
widget.find("#count").text(newcount); //Menetapkan ke elemen yang ditentukan
} else { //Jika belum login, tampilkan "Login"
widget.find("#count").text( "Login" );
}
});
}
Kami juga dapat melakukan beberapa pengoptimalan: misalnya, ketika jumlah email baru yang belum dibaca lebih banyak dari jumlah email asli, menambahkan informasi cepat, dll.
Metode jetpack.notifications.show(options) digunakan untuk informasi cepat. Parameter opsi memiliki tiga atribut: title (String): judul ikon notifikasi (URL): URL badan notifikasi (String); : subjek isi pemberitahuan.
Kode yang dioptimalkan adalah sebagai berikut:
pembaruan fungsi(widget) {
varwidget = $(widget),
notify = function(msg) {// Metode publik untuk mendefinisikan notifikasi
jetpack.notifikasi.show({
judul: "Gmail",
badan: pesan,
ikon: " http://mail.google.com/mail/images/favicon.ico "
});
};
$.mendapatkan(" https://mail.google.com/mail/feed/atom ", fungsi(xml) {
var el = $(xml).find("fullcount"); // Node yang mencatat jumlah email baru yang belum dibaca
jika(el){
var hitungan baru = parseInt(el.get(0).textContent);
if(newcount > count) {// Jika jumlah email baru yang belum dibaca lebih banyak dari jumlah email asli, dari mana datangnya perintah?
var pengirim = $(xml).find("nama").get(0).textContent;
notify("Pesan baru dari "+pengirim);
}
hitungan = hitungan baru;
widget.find("#count").text(count); //Menetapkan ke elemen yang ditentukan
} else { //Jika belum login, minta login
widget.find("#count").text( "Login" );
notify("Silahkan login ke Gmail");
}
});
}
Langkah 3: Siapkan data pembaruan terjadwal
Kami mengatur data untuk diperbarui setiap 1 menit:
setInterval( fungsi() { pembaruan(widget) }, 60*1000 );
Langkah 4: Atur jendela tautan setelah mengklik ekstensi
$(widget).click(function() {//Setel jendela tautan setelah perluasan klik
jetpack.tabs.open(" http://mail.google.com ");
jetpack.tabs[ jetpack.tabs.length-1 ].fokus();
});
jetpack.tabs adalah objek tab dari jendela browser, .open(url) adalah metode membuka tab jendela browser baru, dan .focus() adalah metode memilih tab ini sebagai tab saat ini.
Oke, ekstensi Jetpack Firefox - pengingat email Gmail, dapat diselesaikan dengan mudah dalam empat langkah sederhana.
Seluruh kodenya adalah sebagai berikut:
var hitungan = 0;
pembaruan fungsi(widget) {
varwidget = $(widget),
notify = function(msg) {// Metode publik untuk mendefinisikan notifikasi
jetpack.notifikasi.show({
judul: "Gmail",
badan: pesan,
ikon: " http://mail.google.com/mail/images/favicon.ico "
});
};
$.mendapatkan(" https://mail.google.com/mail/feed/atom ", fungsi(xml) {
var el = $(xml).find("fullcount"); // Node yang mencatat jumlah email baru yang belum dibaca
jika(el){
var hitungan baru = parseInt(el.get(0).textContent);
if(newcount > count) {// Jika jumlah email baru yang belum dibaca lebih banyak dari jumlah email asli, dari mana datangnya perintah?
var pengirim = $(xml).find("nama").get(0).textContent;
notify("Pesan baru dari "+pengirim);
}
hitungan = hitungan baru;
widget.find("#count").text(count); //Menetapkan ke elemen yang ditentukan
} else { //Jika belum login, minta login
widget.find("#count").text( "Login" );
notify("Silahkan login ke Gmail");
}
});
}
jetpack.statusBar.append({
html: '<img src=" http://mail.google.com/mail/images/favicon.ico"/><span id="count"></span>', //Ikon email Gmail dan Nomor yang belum dibaca pesan baru
lebar: 40, //Lebar bilah status adalah 40, dan lebar 3 digit dicadangkan.
siap: fungsi(widget) {
$("#count", widget).css({ //Tambahkan gaya ke jumlah email baru yang belum dibaca
kursor: "penunjuk",
paddingKiri:"4px",
fontFamily: "Tahoma, Arial, sans-serif",
Perataan vertikal: "atas",
Ukuran font: "10 piksel",
tinggi baris:"18px",
}); $(widget).click(function() {//Setel jendela tautan setelah perluasan klik
jetpack.tabs.open(" http://mail.google.com ");
jetpack.tabs[ jetpack.tabs.length-1 ].fokus();
});
perbarui(widget);
setInterval( fungsi() {perbarui(widget) }, 60*1000 );
}
});
Demo Uji: http://www.planabc.net/lab/jetpack/gmail/
Untuk detail API Jetpack, Anda dapat membaca bagian tag Referensi API di halaman about:jetpack.
Kode sumber kasus berasal dari: https://jetpack.mozillalabs.com/demos/gmail-checker.js