Estudo de caso da extensão Jetpack do Firefox: lembrete por e-mail do Gmail
Existe uma função muito boa e prática na parte inferior do software Gtalk, que é a função de lembrete por e-mail do Gmail. O número de novos e-mails não lidos no seu Gmail será atualizado regularmente.
.png)
Imagine como seria interessante se portássemos esse recurso para o Firefox!
O primeiro passo é exibir ícones e dados na barra de status
Através do artigo “Como criar uma extensão Jetpack para Firefox”, podemos criar facilmente:
jetpack.statusBar.append({
html: '<img src="http://mail.google.com/mail/images/favicon.ico"/><span id="count"></span>', //ícone de e-mail do Gmail e número não lido de novas mensagens
width: 55, //A largura na barra de status é 55
onReady: função(widget) {
$("#count", widget).css({ //Adiciona estilo ao número de novos e-mails não lidos
cursor: "ponteiro",
preenchimentoEsquerda:"4px",
fontFamily: "Tahoma, Arial, sem serifa",
verticalAlign: "topo",
tamanho da fonte: "10px",
altura da linha:"18px",
});
}
});
A segunda etapa é obter os dados do Gmail e atualizar o número de novos e-mails não lidos.
Ele pode ser obtido através do feed de e-mail do Gmail (é necessário fazer login): https://mail.google.com/mail/feed/atom
A tag fullcount no código-fonte do feed é usada para registrar o número atual de novos e-mails não lidos.
OK, primeiro a fonte de dados está disponível. A seguir, usamos a tecnologia familiar Ajax para obter os dados e atribuí-los ao elemento especificado.
atualização de função(widget) {
var widget = $(widget);
$.get(" https://mail.google.com/mail/feed/atom ", function(xml) {
var el = $(xml).find("fullcount"); // Nó que registra o número de novos e-mails não lidos
se(el){
var newcount = parseInt(el.get(0).textContent);
widget.find("#count").text(newcount); //Atribuir ao elemento especificado
} else { //Se não estiver logado, exibe "Login"
widget.find("#count").text( "Login");
}
});
}
Também podemos fazer algumas otimizações: por exemplo, quando o número de novos e-mails não lidos for maior que o número original de e-mails, adicionar informações imediatas, etc.
O método jetpack.notifications.show(options) é usado para informações de prompt. O parâmetro options possui três atributos: title (String): o título do ícone de notificação (URL): a URL do corpo da notificação (String). : o conteúdo do assunto da notificação.
O código otimizado é o seguinte:
atualização de função(widget) {
var widget = $(widget),
notify = function(msg) { // Método público para definir notificações
jetpack.notificações.show({
título: "Gmail",
corpo: mensagem,
ícone: " http://mail.google.com/mail/images/favicon.ico "
});
};
$.get(" https://mail.google.com/mail/feed/atom ", function(xml) {
var el = $(xml).find("fullcount"); // Nó que registra o número de novos e-mails não lidos
se(el){
var newcount = parseInt(el.get(0).textContent);
if(newcount > count) { // Se o número de novos e-mails não lidos for maior que o número de e-mails originais, de onde vem o prompt?
var remetente = $(xml).find("nome").get(0).textContent;
notificar("Nova mensagem de "+remetente);
}
contagem = nova contagem;
widget.find("#count").text(count); //Atribuir ao elemento especificado
} else { //Se não estiver logado, solicita o login
widget.find("#count").text( "Login");
notificar("Faça login no Gmail");
}
});
}
Etapa 3: configurar dados de atualização agendada
Definimos os dados para serem atualizados a cada 1 minuto:
setInterval(função() { atualização(widget) }, 60*1000 );
Etapa 4: defina a janela do link após clicar na extensão
$(widget).click(function() { //Definir a janela do link após a expansão do clique
jetpack.tabs.open(" http://mail.google.com ");
jetpack.tabs[ jetpack.tabs.length-1 ].focus();
});
jetpack.tabs é o objeto guia da janela do navegador, .open(url) é o método de abrir uma nova guia da janela do navegador e .focus() é o método de selecionar esta guia como a guia atual.
OK, a extensão Jetpack do Firefox - lembrete de e-mail do Gmail pode ser facilmente concluída em quatro etapas simples.
Todo o código é o seguinte:
var contagem = 0;
atualização de função(widget) {
var widget = $(widget),
notify = function(msg) { // Método público para definir notificações
jetpack.notificações.show({
título: "Gmail",
corpo: mensagem,
ícone: " http://mail.google.com/mail/images/favicon.ico "
});
};
$.get(" https://mail.google.com/mail/feed/atom ", function(xml) {
var el = $(xml).find("fullcount"); // Nó que registra o número de novos e-mails não lidos
se(el){
var newcount = parseInt(el.get(0).textContent);
if(newcount > count) { // Se o número de novos e-mails não lidos for maior que o número de e-mails originais, de onde vem o prompt?
var remetente = $(xml).find("nome").get(0).textContent;
notificar("Nova mensagem de "+remetente);
}
contagem = nova contagem;
widget.find("#count").text(count); //Atribuir ao elemento especificado
} else { //Se não estiver logado, solicita o login
widget.find("#count").text( "Login");
notificar("Faça login no Gmail");
}
});
}
jetpack.statusBar.append({
html: '<img src=" http://mail.google.com/mail/images/favicon.ico"/><span id="count"></span>', //ícone de e-mail do Gmail e número não lido de novas mensagens
width: 40, //A largura da barra de status é 40 e uma largura de 3 dígitos é reservada.
onReady: função(widget) {
$("#count", widget).css({ //Adiciona estilo ao número de novos e-mails não lidos
cursor: "ponteiro",
preenchimentoEsquerda:"4px",
fontFamily: "Tahoma, Arial, sem serifa",
verticalAlign: "topo",
tamanho da fonte: "10px",
altura da linha:"18px",
}); $(widget).click(function() { //Definir a janela do link após a expansão do clique
jetpack.tabs.open(" http://mail.google.com ");
jetpack.tabs[ jetpack.tabs.length-1 ].focus();
});
atualizar(widget);
setInterval( function() {atualização(widget) }, 60*1000 );
}
});
Demonstração de teste: http://www.planabc.net/lab/jetpack/gmail/
Para obter a API detalhada do Jetpack, você pode ler a seção da tag de referência da API na página about:jetpack.
O código-fonte do caso vem de: https://jetpack.mozillalabs.com/demos/gmail-checker.js