Firefox의 Jetpack 확장 사례 연구: Gmail 이메일 알림
Gtalk 소프트웨어 하단에는 Gmail 이메일 알림 기능이라는 매우 훌륭하고 실용적인 기능이 있습니다. Gmail에서 읽지 않은 새 이메일의 수는 정기적으로 업데이트됩니다.
.png)
이 기능을 Firefox로 이식하면 얼마나 흥미로울지 상상해 보세요!
첫 번째 단계는 상태 표시줄에 아이콘과 데이터를 표시하는 것입니다.
"Firefox용 Jetpack 확장 프로그램을 만드는 방법" 기사를 통해 다음을 쉽게 만들 수 있습니다.
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",
FontFamily: "타호마, Arial, 산세리프",
수직 정렬: "상단",
글꼴 크기: "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 = parsInt(el.get(0).textContent);
widget.find("#count").text(newcount); //지정된 요소에 할당
} else { //로그인하지 않은 경우 "로그인"을 표시합니다.
widget.find("#count").text( "로그인" );
}
});
}
예를 들어, 읽지 않은 새 이메일 수가 원래 이메일 수보다 많은 경우 프롬프트 정보를 추가하는 등 몇 가지 최적화를 수행할 수도 있습니다.
jetpack.notifications.show(options) 메소드는 프롬프트 정보에 사용됩니다. options 매개변수에는 세 가지 속성이 있습니다: 제목(문자열): 알림 아이콘의 제목(URL): 알림 아이콘의 URL(문자열) : 알림의 제목 내용입니다.
최적화된 코드는 다음과 같습니다.
함수 업데이트(위젯) {
var 위젯 = $(위젯),
inform = 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 = parsInt(el.get(0).textContent);
if(newcount > count) { // 읽지 않은 새 이메일의 수가 원본 이메일의 수보다 큰 경우 프롬프트는 어디에서 왔습니까?
var 발신자 = $(xml).find("name").get(0).textContent;
inform(""+sender)의 새 메시지;
}
개수 = 새 개수;
widget.find("#count").text(count); //지정된 요소에 할당
} else { //로그인하지 않은 경우 로그인하라는 메시지 표시
widget.find("#count").text( "로그인" );
inform("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()는 이 탭을 현재 탭으로 선택하는 메서드입니다.
좋습니다. Firefox의 Jetpack 확장 프로그램인 Gmail 이메일 알림은 간단한 4단계로 쉽게 완료할 수 있습니다.
전체 코드는 다음과 같습니다.
변수 개수 = 0;
함수 업데이트(위젯) {
var 위젯 = $(위젯),
inform = 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 = parsInt(el.get(0).textContent);
if(newcount > count) { // 읽지 않은 새 이메일의 수가 원본 이메일의 수보다 큰 경우 프롬프트는 어디에서 왔습니까?
var 발신자 = $(xml).find("name").get(0).textContent;
inform(""+sender)의 새 메시지;
}
개수 = 새 개수;
widget.find("#count").text(count); //지정된 요소에 할당
} else { //로그인하지 않은 경우 로그인하라는 메시지 표시
widget.find("#count").text( "로그인" );
inform("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",
FontFamily: "타호마, Arial, 산세리프",
수직 정렬: "상단",
글꼴 크기: "10px",
라인 높이:"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/
Jetpack의 자세한 API는 about:jetpack 페이지의 API 참조 태그 섹션을 참조하세요.
사례 소스 코드는 https://jetpack.mozillalabs.com/demos/gmail-checker.js 에서 가져옵니다.