Пример расширения Jetpack для Firefox: напоминание по электронной почте Gmail
В нижней части программного обеспечения Gtalk есть очень хорошая и практичная функция — функция напоминания по электронной почте Gmail. Количество новых непрочитанных писем в вашем Gmail будет регулярно обновляться.
.png)
Только представьте, как было бы интересно, если бы мы портировали эту функцию в Firefox!
Первым шагом является отображение значков и данных в строке состояния.
С помощью статьи «Как создать расширение Jetpack для Firefox» мы можем легко создать:
jetpack.statusBar.append({
html: '<img src="http://mail.google.com/mail/images/favicon.ico"/><span id="count"></span>', //значок почты Gmail и непрочитанный номер новых сообщений
width: 55, //Ширина строки состояния равна 55
onReady: функция (виджет) {
$("#count", widget).css({ //Добавляем стиль к количеству непрочитанных новых писем
курсор: «указатель»,
paddingLeft:"4px",
Семейство шрифтов: "Tahoma, Arial, без засечек",
вертикальноеВыравнивание: "сверху",
Размер шрифта: "10 пикселей",
lineHeight:"18px",
});
}
});
Второй шаг — получить данные Gmail и обновить количество непрочитанных новых писем.
Его можно получить через почтовый канал Gmail (требуется вход в систему): https://mail.google.com/mail/feed/atom .
Тег fullcount в исходном коде канала используется для записи текущего количества непрочитанных новых писем.
Хорошо, сначала доступен источник данных. Далее мы используем знакомую технологию Ajax для получения данных и присваиваем их указанному элементу.
обновление функции (виджет) {
вар виджет = $(виджет);
$.get(" https://mail.google.com/mail/feed/atom ", function(xml) {
var el = $(xml).find("fullcount"); // Узел, записывающий количество непрочитанных новых писем
если(эл){
вар newcount = parseInt(el.get(0).textContent);
widget.find("#count").text(newcount); //Назначаем указанному элементу
} else { //Если вы не вошли в систему, отобразите «Войти»
widget.find("#count").text( "Войти");
}
});
}
Мы также можем провести некоторую оптимизацию: например, когда количество непрочитанных новых писем превышает исходное количество писем, добавить подсказку и т. д.
Метод jetpack.notifications.show(options) используется для получения подсказок. Параметр options имеет три атрибута: заголовок (String): заголовок значка уведомления (URL): URL-адрес тела значка уведомления (String). : тематическое содержание уведомления.
Оптимизированный код выглядит следующим образом:
обновление функции (виджет) {
вар виджет = $(виджет),
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"); // Узел, записывающий количество непрочитанных новых писем
если(эл){
вар newcount = parseInt(el.get(0).textContent);
if(newcount > count) { // Если количество непрочитанных новых писем больше, чем количество исходных писем, откуда появится подсказка?
вар отправитель = $(xml).find("имя").get(0).textContent;
notify("Новое сообщение от "+sender);
}
счет = новый счет;
widget.find("#count").text(count); //Назначаем указанному элементу
} else { //Если вы не вошли в систему, предложите войти
widget.find("#count").text( "Войти");
notify("Пожалуйста, войдите в Gmail");
}
});
}
Шаг 3. Настройте данные запланированного обновления.
Мы установили обновление данных каждую 1 минуту:
setInterval( function() { update(widget) }, 60*1000 );
Шаг 4. Установите окно ссылки после нажатия расширения.
$(widget).click(function() { //Устанавливаем окно ссылки после раскрытия клика
jetpack.tabs.open(" http://mail.google.com ");
jetpack.tabs[ jetpack.tabs.length-1 ].focus();
});
jetpack.tabs — это объект вкладки окна браузера, .open(url) — метод открытия новой вкладки окна браузера, а .focus() — метод выбора этой вкладки в качестве текущей.
Хорошо, расширение Jetpack для Firefox — напоминание по электронной почте Gmail можно легко создать за четыре простых шага.
Весь код выглядит следующим образом:
количество вар = 0;
обновление функции (виджет) {
вар виджет = $(виджет),
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"); // Узел, записывающий количество непрочитанных новых писем
если(эл){
вар newcount = parseInt(el.get(0).textContent);
if(newcount > count) { // Если количество непрочитанных новых писем больше, чем количество исходных писем, откуда появится подсказка?
вар отправитель = $(xml).find("имя").get(0).textContent;
notify("Новое сообщение от "+sender);
}
счет = новый счет;
widget.find("#count").text(count); //Назначаем указанному элементу
} else { //Если вы не вошли в систему, предложите войти
widget.find("#count").text( "Войти");
notify("Пожалуйста, войдите в Gmail");
}
});
}
jetpack.statusBar.append({
html: '<img src=" http://mail.google.com/mail/images/favicon.ico"/><span id="count"></span>', //значок почты Gmail и непрочитанный номер новых сообщений
width: 40, //Ширина строки состояния равна 40, зарезервирована 3-значная ширина.
onReady: функция (виджет) {
$("#count", widget).css({ //Добавляем стиль к количеству непрочитанных новых писем
курсор: «указатель»,
paddingLeft:"4px",
Семейство шрифтов: "Tahoma, Arial, без засечек",
вертикальноеВыравнивание: "сверху",
Размер шрифта: "10 пикселей",
lineHeight:"18px",
}); $(widget).click(function() { //Устанавливаем окно ссылки после раскрытия клика
jetpack.tabs.open(" http://mail.google.com ");
jetpack.tabs[ jetpack.tabs.length-1 ].focus();
});
обновление (виджет);
setInterval( function() {update(widget) }, 60*1000 );
}
});
Тестовая демонстрация: http://www.planabc.net/lab/jetpack/gmail/
Подробное описание API Jetpack можно найти в разделе тегов API Reference на странице about:jetpack.
Исходный код дела находится по адресу: https://jetpack.mozillalabs.com/demos/gmail-checker.js.