先取り! Google Chrome Extensions

第4回 Chrome Extensionsのこれから

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

この記事で取り上げているAPIは現在と使い方が異なっていたり,使用できなくなったものを含んでいます。

特にToolstrips APIは最新のChromeでは使用できなくなっています。詳しくは続・先取り! Google Chrome Extensionsをご覧ください。

前々回前回は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というグローバルプロパティを作成し,サービスの情報を入れておきます。

Background PageにSBMConfを用意

window.SBMConf = {
  Services:Services
};

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

getBackgroundPageの利用

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は削除します)⁠

manifest.jsonの取得と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を使用しました)⁠

config.htmlの一部(サービスの選択)

<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 サービスの選択

図1 サービスの選択

著者プロフィール

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

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

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

コメント

コメントの記入