Estudio de caso de extensión Jetpack: recordatorio de correo electrónico de Gmail

Caso de estudio de la extensión Jetpack de Firefox: recordatorio de correo electrónico de Gmail

Hay una función muy buena y práctica en la parte inferior del software Gtalk, que es la función de recordatorio de correo electrónico de Gmail. La cantidad de nuevos correos electrónicos no leídos en su Gmail se actualizará periódicamente.

¡Imagínense lo interesante que sería si transfiriéramos esta función a Firefox!

El primer paso es mostrar iconos y datos en la barra de estado.

A través del artículo "Cómo crear una extensión Jetpack para Firefox", podemos crear fácilmente:

jetpack.statusBar.append({
html: '<img src="http://mail.google.com/mail/images/favicon.ico"/><span id="count"></span>', //Icono de correo de Gmail y número no leído de nuevos mensajes
ancho: 55, //El ancho de la barra de estado es 55
onReady: función (widget) {
$("#count", widget).css({ //Agregar estilo a la cantidad de correos electrónicos nuevos no leídos
cursor: "puntero",
rellenoIzquierda: "4px",
fontFamily: "Tahoma, Arial, sans-serif",
alineación vertical: "arriba",
Tamaño de fuente: "10px",
altura de línea: "18px",
});
}
});

El segundo paso es obtener datos de Gmail y actualizar la cantidad de correos electrónicos nuevos no leídos.

Se puede obtener a través del feed de correo de Gmail (es necesario iniciar sesión): https://mail.google.com/mail/feed/atom

La etiqueta fullcount en el código fuente del feed se utiliza para registrar el número actual de correos electrónicos nuevos no leídos.

Bien, primero la fuente de datos está disponible. A continuación, utilizamos la conocida tecnología Ajax para obtener los datos y asignarlos al elemento especificado.

actualización de función (widget) {
var widget = $(widget);
$.get(" https://mail.google.com/mail/feed/atom ", función(xml) {
var el = $(xml).find("fullcount"); // Nodo que registra el número de correos electrónicos nuevos no leídos
si(el){
var newcount = parseInt(el.get(0).textContent);
widget.find("#count").text(newcount); //Asignar al elemento especificado
} else { //Si no has iniciado sesión, muestra "Iniciar sesión"
widget.find("#count").text( "Iniciar sesión" );
}
});
}

También podemos hacer algunas optimizaciones: por ejemplo, cuando la cantidad de correos electrónicos nuevos no leídos es mayor que la cantidad de correos electrónicos originales, agregar información rápida, etc.
El método jetpack.notifications.show(options) se utiliza para solicitar información. El parámetro de opciones tiene tres atributos: título (Cadena): el título del ícono de notificación (URL): la URL del cuerpo de la notificación (Cadena); : el contenido del asunto de la notificación.

El código optimizado es el siguiente:

actualización de función (widget) {
var widget = $(widget),
notify = function(msg) { // Método público para definir notificaciones
jetpack.notificaciones.show({
título: "Gmail",
cuerpo: mensaje,
icono: " http://mail.google.com/mail/images/favicon.ico "
});
};
$.get(" https://mail.google.com/mail/feed/atom ", función(xml) {
var el = $(xml).find("fullcount"); // Nodo que registra el número de correos electrónicos nuevos no leídos
si(el){
var newcount = parseInt(el.get(0).textContent);
if(newcount > count) { // Si la cantidad de correos electrónicos nuevos no leídos es mayor que la cantidad de correos electrónicos originales, ¿de dónde viene el mensaje?
var remitente = $(xml).find("nombre").get(0).textContent;
notificar("Nuevo mensaje de "+remitente);
}
recuento = nuevo recuento;
widget.find("#count").text(count); //Asignar al elemento especificado
} else { //Si no has iniciado sesión, solicita iniciar sesión
widget.find("#count").text( "Iniciar sesión" );
notificar("Inicie sesión en Gmail");
}
});
}

Paso 3: configurar los datos de actualización programados

Configuramos los datos para que se actualicen cada 1 minuto:

setInterval( función() {actualizar(widget) }, 60*1000);

Paso 4: configure la ventana del enlace después de hacer clic en la extensión

$(widget).click(function() { //Establece la ventana del enlace después de hacer clic en la expansión
jetpack.tabs.open(" http://mail.google.com ");
jetpack.tabs[ jetpack.tabs.length-1 ].focus();
});

jetpack.tabs es el objeto de pestaña de la ventana del navegador, .open(url) es el método para abrir una nueva pestaña de la ventana del navegador y .focus() es el método para seleccionar esta pestaña como la pestaña actual.

Bien, la extensión Jetpack de Firefox: recordatorio de correo electrónico de Gmail, se puede completar fácilmente en cuatro sencillos pasos.

El código completo es el siguiente:

recuento de variables = 0;
actualización de función (widget) {
var widget = $(widget),
notify = function(msg) { // Método público para definir notificaciones
jetpack.notificaciones.show({
título: "Gmail",
cuerpo: mensaje,
icono: " http://mail.google.com/mail/images/favicon.ico "
});
};
$.get(" https://mail.google.com/mail/feed/atom ", función(xml) {
var el = $(xml).find("fullcount"); // Nodo que registra el número de correos electrónicos nuevos no leídos
si(el){
var newcount = parseInt(el.get(0).textContent);
if(newcount > count) { // Si la cantidad de correos electrónicos nuevos no leídos es mayor que la cantidad de correos electrónicos originales, ¿de dónde viene el mensaje?
var remitente = $(xml).find("nombre").get(0).textContent;
notificar("Nuevo mensaje de "+remitente);
}
recuento = nuevo recuento;
widget.find("#count").text(count); //Asignar al elemento especificado
} else { //Si no has iniciado sesión, solicita iniciar sesión
widget.find("#count").text( "Iniciar sesión" );
notificar("Inicie sesión en Gmail");
}
});
}
jetpack.statusBar.append({
html: '<img src=" http://mail.google.com/mail/images/favicon.ico"/><span id="count"></span>', //Icono de correo de Gmail y número no leído de nuevos mensajes
ancho: 40, // El ancho de la barra de estado es 40 y se reserva un ancho de 3 dígitos.
onReady: función (widget) {
$("#count", widget).css({ //Agregar estilo a la cantidad de correos electrónicos nuevos no leídos
cursor: "puntero",
rellenoIzquierda: "4px",
fontFamily: "Tahoma, Arial, sans-serif",
alineación vertical: "arriba",
Tamaño de fuente: "10px",
altura de línea: "18px",
}); $(widget).click(function() { //Establece la ventana del enlace después de hacer clic en la expansión
jetpack.tabs.open(" http://mail.google.com ");
jetpack.tabs[ jetpack.tabs.length-1 ].focus();
});
actualizar(widget);
setInterval( función() {actualización(widget) }, 60*1000);
}
});

Demostración de prueba: http://www.planabc.net/lab/jetpack/gmail/

Para obtener la API detallada de Jetpack, puede leer la sección de etiquetas de referencia de API de la página about:jetpack.

El código fuente del caso proviene de: https://jetpack.mozillalabs.com/demos/gmail-checker.js