続・先取り! Google Chrome Extensions

第1回 Chrome ExtensionsのAPI#1

この記事を読むのに必要な時間:およそ 6.5 分

Browser Actionsを使ったExtensionの作成

それでは,Browser ActionsのBadgeを使った簡単なExtensionを作成してみます。Badgeは何かの件数を表示するのに適しており,公式のサンプルとしてGmail checkerなどが存在します。そこで,今回は手軽なAPIが存在するlivedoor Readerの未読件数を表示するExtensionを作成します。

livedoor Readerの未読件数API

livedoor Readerには未読件数を返すシンプルなAPIが存在します。具体的には http://rpc.reader.livedoor.com/notify?user=USERNAME というURLにリクエストを投げると,未読件数がテキストで返ってきます。

未読件数へのアクセス

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|| という形で返ってきます。先頭の|を取り除けば,parseIntが使用できるので,substringで先頭の文字だけ取り除いています。また,件数取得が成功していたら,setTimeoutで1分間置いて取得を繰り返しています。

続いて,Badgeの更新処理を見ていきます。Badgeは4文字までしか表示できないので,未読件数が5ケタになる場合は指数表記による短縮表記になるように実装しました。

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において,45e3は45000(45×(10の3乗⁠⁠)を意味します。これは主にコンピューター上でよく用いられる表記で,一般的ではありませんが,4文字という制約からこの表記を採用しました。

Popupによる簡易設定フォーム

続いて,ユーザーIDを入力するフォームを用意します。今回はPopupを使って簡易フォームを作成します。まずはmanifest.jsonでpopupを定義します。

manifest.jsonの記述

  "browser_action": {
      "name": "LDR Unread",
      "icons": ["ldr_favicon.png"],
      "popup": { "path": "popup.html", "height": 40 }
  }

中身となるHTML/CSSを用意します。

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;
}

さらに,このフォームを処理するJavaScriptを用意します。

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側では,chrome.extension.getBackgroundPageでBackground Pageのグローバルオブジェクトを取得し,ユーザー名が入力されたら初期化処理を行うようにしています。

最後になりますが,Background Pageでの初期化処理を記述します。

Background Pageでの初期化処理

var UserName = localStorage.ldrUserName;
if (UserName) {
  check();
}
function init(name){
  UserName = localStorage.ldrUserName = name;
  check();
}

Popupで入力されたユーザー名をlocalStorageにも保存しておき,ブラウザを終了しても設定が保存されるようにしています。

本当にシンプルですが,これでこのExtensionは完成です。インストールはこちらからどうぞ

著者プロフィール

太田昌吾(おおたしょうご,ハンドルネーム:os0x)

1983年生まれ。JavaScriptをメインに,HTML/CSSにFlashなどのクライアントサイドを得意とするウェブエンジニア。2009年12月より、Google Chrome ExtensionsのAPI Expertとして活動を開始。

URLhttp://d.hatena.ne.jp/os0x/