กรณีศึกษาส่วนขยาย Jetpack ของ Firefox: การแจ้งเตือนทางอีเมลของ Gmail
มีฟังก์ชันที่ดีและใช้งานได้จริงที่ด้านล่างของซอฟต์แวร์ Gtalk ซึ่งเป็นฟังก์ชันเตือนอีเมลของ Gmail จำนวนอีเมลใหม่ที่ยังไม่ได้อ่านใน Gmail ของคุณจะได้รับการอัปเดตเป็นประจำ
.png)
ลองจินตนาการดูว่าจะน่าสนใจแค่ไหนหากเราย้ายฟีเจอร์นี้ไปยัง Firefox!
ขั้นตอนแรกคือการแสดงไอคอนและข้อมูลในแถบสถานะ
จากบทความ "วิธีสร้างส่วนขยาย Jetpack สำหรับ Firefox" เราสามารถสร้าง:
jetpack.statusBar.ผนวก ({
html: '<img src="http://mail.google.com/mail/images/favicon.ico"/><span id="count"></span>', // ไอคอนอีเมล Gmail และหมายเลขที่ยังไม่ได้อ่าน ของข้อความใหม่
width: 55, //ความกว้างบนแถบสถานะคือ 55
onReady: ฟังก์ชั่น (วิดเจ็ต) {
$("#count", widget).css({ //เพิ่มสไตล์ให้กับจำนวนอีเมลใหม่ที่ยังไม่ได้อ่าน
เคอร์เซอร์: "ตัวชี้"
ช่องว่างภายใน: "4px",
FontFamily: "Tahoma, Arial, sans-serif",
แนวตั้งAlign: "ด้านบน",
ขนาดตัวอักษร: "10px",
ความสูงบรรทัด:"18px",
-
-
-
ขั้นตอนที่สองคือการรับข้อมูล Gmail และอัปเดตจำนวนอีเมลใหม่ที่ยังไม่ได้อ่าน
สามารถรับได้ผ่านฟีดอีเมล Gmail (ต้องเข้าสู่ระบบ): https://mail.google.com/mail/feed/atom
แท็ก fullcount ในซอร์สโค้ดของฟีดใช้เพื่อบันทึกจำนวนอีเมลใหม่ที่ยังไม่ได้อ่านในปัจจุบัน
ตกลง ก่อนอื่นแหล่งข้อมูลจะพร้อมใช้งาน ต่อไป เราใช้เทคโนโลยี Ajax ที่คุ้นเคยเพื่อรับข้อมูลและกำหนดให้กับองค์ประกอบที่ระบุ
อัปเดตฟังก์ชัน (วิดเจ็ต) {
วิดเจ็ต var = $(วิดเจ็ต);
$.get(" https://mail.google.com/mail/feed/atom ", function(xml) {
var el = $(xml).find("fullcount"); // โหนดที่บันทึกจำนวนอีเมลใหม่ที่ยังไม่ได้อ่าน
ถ้า(เอล){
var newcount = parseInt(el.get(0).textContent);
widget.find("#count").text(newcount); //กำหนดให้กับองค์ประกอบที่ระบุ
} else { //หากไม่ได้เข้าสู่ระบบ ให้แสดง "เข้าสู่ระบบ"
widget.find("#count").text( "เข้าสู่ระบบ" );
-
-
-
นอกจากนี้เรายังสามารถทำการเพิ่มประสิทธิภาพบางอย่างได้: ตัวอย่างเช่น เมื่อจำนวนอีเมลใหม่ที่ยังไม่ได้อ่านมากกว่าจำนวนอีเมลเดิม การเพิ่มข้อมูลที่แจ้ง เป็นต้น
วิธีการ jetpack.notifications.show(options) ใช้สำหรับข้อมูลที่พร้อมท์ พารามิเตอร์ options มีสามคุณลักษณะ: ชื่อ (สตริง): ชื่อเรื่องของการแจ้งเตือน (URL): URL ของเนื้อหาการแจ้งเตือน (สตริง) : เนื้อหาของการแจ้งเตือน
รหัสที่ปรับให้เหมาะสมมีดังนี้:
อัปเดตฟังก์ชัน (วิดเจ็ต) {
วิดเจ็ต var = $(วิดเจ็ต)
notify = function(msg) { // วิธีการสาธารณะเพื่อกำหนดการแจ้งเตือน
jetpack.notifications.show({
หัวเรื่อง: "Gmail",
เนื้อความ: ผงชูรส,
ไอคอน: " http://mail.google.com/mail/images/favicon.ico "
-
-
$.get(" https://mail.google.com/mail/feed/atom ", function(xml) {
var el = $(xml).find("fullcount"); // โหนดที่บันทึกจำนวนอีเมลใหม่ที่ยังไม่ได้อ่าน
ถ้า(เอล){
var newcount = parseInt(el.get(0).textContent);
if(newcount > count) { // หากจำนวนอีเมลใหม่ที่ยังไม่ได้อ่านมากกว่าจำนวนอีเมลต้นฉบับ ข้อความแจ้งมาจากไหน?
ผู้ส่ง var = $(xml).find("name").get(0).textContent;
notify("ข้อความใหม่จาก "+ผู้ส่ง);
-
นับ = นับใหม่;
widget.find("#count").text(count); //กำหนดให้กับองค์ประกอบที่ระบุ
} else { //หากไม่ได้เข้าสู่ระบบ ให้เข้าสู่ระบบ
widget.find("#count").text( "เข้าสู่ระบบ" );
notify("กรุณาเข้าสู่ระบบ Gmail");
-
-
-
ขั้นตอนที่ 3: ตั้งค่าข้อมูลการอัพเดตตามกำหนดเวลา
เราตั้งค่าข้อมูลให้อัปเดตทุกๆ 1 นาที:
setInterval( function() { อัปเดต (วิดเจ็ต) }, 60*1000 );
ขั้นตอนที่ 4: ตั้งค่าหน้าต่างลิงก์หลังจากคลิกส่วนขยาย
$(widget).click(function() { //ตั้งค่าหน้าต่างลิงก์หลังจากขยายการคลิก
jetpack.tabs.open(" http://mail.google.com ");
jetpack.tabs[ jetpack.tabs.length-1 ].โฟกัส();
-
jetpack.tabs คืออ็อบเจ็กต์แท็บของหน้าต่างเบราว์เซอร์ .open(url) คือวิธีการเปิดแท็บหน้าต่างเบราว์เซอร์ใหม่ และ .focus() คือวิธีการเลือกแท็บนี้เป็นแท็บปัจจุบัน
ตกลง ส่วนขยาย Jetpack ของ Firefox - การแจ้งเตือนทางอีเมล Gmail สามารถดำเนินการได้อย่างง่ายดายในสี่ขั้นตอนง่ายๆ
รหัสทั้งหมดมีดังนี้:
จำนวนนับ = 0;
อัปเดตฟังก์ชัน (วิดเจ็ต) {
วิดเจ็ต var = $(วิดเจ็ต)
notify = function(msg) { // วิธีการสาธารณะเพื่อกำหนดการแจ้งเตือน
jetpack.notifications.show({
หัวเรื่อง: "Gmail",
เนื้อความ: ผงชูรส,
ไอคอน: " http://mail.google.com/mail/images/favicon.ico "
-
-
$.get(" https://mail.google.com/mail/feed/atom ", function(xml) {
var el = $(xml).find("fullcount"); // โหนดที่บันทึกจำนวนอีเมลใหม่ที่ยังไม่ได้อ่าน
ถ้า(เอล){
var newcount = parseInt(el.get(0).textContent);
if(newcount > count) { // หากจำนวนอีเมลใหม่ที่ยังไม่ได้อ่านมากกว่าจำนวนอีเมลต้นฉบับ ข้อความแจ้งมาจากไหน?
ผู้ส่ง var = $(xml).find("name").get(0).textContent;
notify("ข้อความใหม่จาก "+ผู้ส่ง);
-
นับ = นับใหม่;
widget.find("#count").text(count); //กำหนดให้กับองค์ประกอบที่ระบุ
} else { //หากไม่ได้เข้าสู่ระบบ ให้เข้าสู่ระบบ
widget.find("#count").text( "เข้าสู่ระบบ" );
notify("กรุณาเข้าสู่ระบบ Gmail");
-
-
-
jetpack.statusBar.ผนวก ({
html: '<img src=" http://mail.google.com/mail/images/favicon.ico"/><span id="count"></span>', // ไอคอนอีเมล Gmail และหมายเลขที่ยังไม่ได้อ่าน ของข้อความใหม่
width: 40, //ความกว้างของแถบสถานะคือ 40 และสงวนความกว้าง 3 หลักไว้
onReady: ฟังก์ชั่น (วิดเจ็ต) {
$("#count", widget).css({ //เพิ่มสไตล์ให้กับจำนวนอีเมลใหม่ที่ยังไม่ได้อ่าน
เคอร์เซอร์: "ตัวชี้"
ช่องว่างภายใน: "4px",
FontFamily: "Tahoma, Arial, sans-serif",
แนวตั้งAlign: "ด้านบน",
ขนาดตัวอักษร: "10px",
ความสูงบรรทัด:"18px",
}); $(widget).click(function() { //ตั้งค่าหน้าต่างลิงก์หลังจากขยายการคลิก
jetpack.tabs.open(" http://mail.google.com ");
jetpack.tabs[ jetpack.tabs.length-1 ].โฟกัส();
-
อัปเดต (วิดเจ็ต);
setInterval( function() {อัพเดต (วิดเจ็ต) }, 60*1000 );
-
-
ทดสอบการสาธิต: http://www.planabc.net/lab/jetpack/gmail/
สำหรับ API โดยละเอียดของ Jetpack คุณสามารถอ่านส่วนแท็กอ้างอิง API ของหน้า about:jetpack
ซอร์สโค้ดเคสมาจาก: https://jetpack.mozillalabs.com/demos/gmail-checker.js