前々回，前回はSBMカウンタを中心にExtensionsの作り方を学んできました。今回はあと少しだけSBMカウンタを改良してExtensionとして仕上げを行いつつ，Chrome Extensionsの最新情報と今後の予定を見ていきます。

カスタマイズと設定の保存

2つのソーシャルブックマークサービスのブックマーク数を表示し，さらにウェブページ内のリンクにもブックマークを表示する，とSBMカウンタも少しずつ機能が増えてきました。このように機能が増えてくるとエンドユーザー側で機能をカスタマイズしたいという要望が出てきます。今回は，WebStorageを使ったユーザーのカスタマイズにスポットを当てていきます。

WebStorageとWebDatabase

まず，WebStorageについて簡単に説明します。WebStorageは，ブラウザ内のキーバリューストアとしてデータを保存・参照できる仕組みです。期限なく永続化するlocalStorageと，セッション（この場合，ブラウザを起動してから終了するまで）単位で永続化するsessionStorageの2つのAPIからなります。FirefoxにおいてDOMStorageと呼ばれる機能をベースとして，W3CのHTML5仕様の一部として標準化が進み，現在はHTML5から独立した仕様として策定が進んでいます。

また，WebDatabaseというブラウザ内でリレーショナルデータベースを扱える仕組みもあります。具体的にはブラウザ内部にSQLiteを持ち，SQLでデータを扱うことができます。こちらはGoogle Gearsの実装をベースとして，やはりHTML5の一部として標準化が進んでいましたが，一旦はWebStorageとして分離され，さらに現在はWebDatabaseとして独立した仕様になっています。

Google Chromeは，このWebStorageとWebDatabaseをバージョン 4からサポートします。今回は扱いやすいWebStorageを使ってExtensionに設定機能を実装してみたいと思います。

Extension API

さて，設定機能を実装する前に，ToolstripsとBackground Pageで情報を共有できるようにしておく必要があります。というのも，設定画面で保存した情報をすべてのToolstripsとBackground Pageに個別に送るというのは避けたいので，ここはBackground Pageとのやり取り1つで完結するようにしたいと思います。これは，Extension APIのchrome.extension.getBackgroundPageで簡単に実現できます（ただし，半永続化されているBackground Pageのオブジェクトはメモリーリークを起こしやすいので，その点には十分注意する必要があります。本稿ではメモリリークについて十分なチェックを行っているとは言えません。ご了承ください）。

まず，Background PageにSBMConfというグローバルプロパティを作成し，サービスの情報を入れておきます。

window.SBMConf = {
  Services:Services
};

Toolstrip側では，getBackgroundPageでBackground Pageのグローバルオブジェクトを取得し，そこからSBMConf，Servicesとアクセスします。これでBackground PageとToolstripsでデータを共有できました。

var BackGround = chrome.extension.getBackgroundPage();
var SBMConf = BackGround.SBMConf;
/* 省略 */
var services = SBMConf.Services.map(function(service, i){
/* 省略 */
});

続いて，サービスごとにON／OFFを切り替える機能を実装してみます。まず，設定ページを用意します。設定ページを呼び出す方法は今のところToolstripか，Page Actionのどちらかになります（ほかには chrome://extensions/ から呼び出す方法などが提案されています）。今回はPage Actionを使用します（同時に前回作成したPageActionは削除します）。

function get_manifest(callback){
  var xhr = new XMLHttpRequest();
  xhr.onload = function(){
    callback(JSON.parse(xhr.responseText));
  };
  xhr.open('GET','./manifest.json',true);
  xhr.send(null);
}
get_manifest(function(manifest){
  var configAction = manifest.page_actions[0];
  chrome.pageActions[configAction.id].addListener(
  function(id, tabinf){
    var width = 480;
    var height = 500;
    var left = (screen.width / 2) - (width / 2);
    var top = (screen.height / 2) - (height / 2);
    var param = 'width=' + width + ', height=' + height +
        ', top=' + top + ', left=' + left;
    var name = manifest.name + '_config';
    var win = window.open('config.html', name, param);
    win.focus();
  });
  chrome.tabs.onUpdated.addListener(
  function(tabid, inf){
    if (inf.status !== 'loading') return;
    chrome.tabs.get(tabid, function(tab){
      chrome.pageActions.enableForTab(configAction.id,
          {tabId: tab.id, url: tab.url});
    });
  });
});

少々トリッキーですが，manifest.jsonをパースして得られるpage_actionsの定義を使ってPage Actionを登録する方法を使ってみました。Page Actionのアイコンがクリックされた際はwindow.openで小窓を開いています。chrome.windows.createではなくwindow.openを使用しているのは，よりシンプルな小窓を開くためです（本来ならshowModalDialogを使用したいのですが，拡張として機能しないバグ（？）のためwindow.openを使用しました）。

<h3>使用するサービス</h3>
<ul id="service_list">
</ul>

var service_list = document.getElementById('service_list');
SBMConf.Services.forEach(function(service){
  var item = document.createElement('li');
  var box = document.createElement('input');
  box.type = 'checkbox';
  box.addEventListener('click', function(){
    service.enable = box.checked;
  },false);
  box.checked = service.enable;
  var _id = box.id = 'enable_' + service.id;
  item.appendChild(box);
  var label = document.createElement('label');
  label.htmlFor = _id;
  label.textContent = service.name;
  item.appendChild(label);
  service_list.appendChild(item);
});

やはりgetBackgroundPageで取得したSBMConf.Servicesからサービスのリストを作成し，チェックボックスでON／OFFを制御しています。各Serviceにはenableというプロパティを用意してあり，これがtrue／falseを取るようになっています。ここまでで，下記のように（ブラウザを閉じるまで記憶される）サービスごとのオンオフ機能が実装できました。

図1　サービスの選択