Browser Actionsを使ったExtensionの作成
それでは，
livedoor Readerの未読件数API
livedoor Readerには未読件数を返すシンプルなAPIが存在します。具体的には http://
未読件数へのアクセス
var API = 'http://rpc.reader.livedoor.com/notify?user=';
function check(){
var xhr = new XMLHttpRequest();
var url = API + UserName;
xhr.open('GET', url, true);
xhr.onload = function(){
var res = xhr.responseText.substring(1);
var count = parseInt(res, 10);
if (count > 0) {
update(String(count));
setTimeout(check, 60 * 1000);
} else {
update('!');
}
};
xhr.onerror = function(){
update('!');
};
xhr.send(null);
}未読件数のテキストは |100|| という形で返ってきます。先頭の|を取り除けば，
続いて，
Badgeの更新処理
var LIMIT = 4;
var LIMIT_COUNT = Math.pow(10, LIMIT);
function update(count){
if (parseInt(count,10) >= LIMIT_COUNT) {
count = abbr_exp_notation(parseInt(count,10), LIMIT+1);
}
chrome.browserAction.setBadgeText(count);
}
function abbr_exp_notation(count, i){
if (count < Math.pow(10, i)) {
var _i = i-2;
return Math.floor(count / Math.pow(10, _i)) + 'e' + _i;
} else {
return abbr_exp_notation(count, ++i);
}
}JavaScriptにおいて，
Popupによる簡易設定フォーム
続いて，
manifest.
"browser_action": {
"name": "LDR Unread",
"icons": ["ldr_favicon.png"],
"popup": { "path": "popup.html", "height": 40 }
}中身となるHTML／
PopupのHTML
<div>
<input type="text" placeholder="UserName" id="username">
</div>PopupのCSS
body {
overflow: hidden;
margin: 0px;
padding: 0px;
background: #dadae7;
height:38px;
border:1px solid #000033;
}
body > div{
padding:6px;
}
body > div > input{
width:100px;
}さらに，
PopupのJavaScript
var BG = chrome.extension.getBackgroundPage();
var username = document.getElementById('username');
username.addEventListener('change',function(){
BG.init(this.value);
});
if (BG.UserName) {
username.value = BG.UserName;
}Popup側では，
最後になりますが，
Background Pageでの初期化処理
var UserName = localStorage.ldrUserName;
if (UserName) {
check();
}
function init(name){
UserName = localStorage.ldrUserName = name;
check();
}Popupで入力されたユーザー名をlocalStorageにも保存しておき，
本当にシンプルですが，
