先取り! Google Chrome Extensions

第4回 Chrome Extensionsのこれから

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

localStorageの利用

さて,ようやく本題であるWebStorageに入ります。といっても,localStorage自体はキーに文字列を保存するシンプルなAPIとして簡単に扱えます。今回はサービスのIDをキーに localStorage['enable_hatena'] のように値を参照し,値を持っていればその値を初期値とします。またserviceオブジェクトには状態をセットするためのset_enableメソッドを追加します。

Background PageでのlocalStorageの利用

Services.forEach(function(service){
  var enable = localStorage['enable_' + service.id];
  if (enable) {
    service.enable = JSON.parse(enable);
  }
  service.set_enable = function(state){
    service.enable = state;
    localStorage['enable_' + service.id] = state;
  }
});

さきほどの,チェックボックスをオンオフした際の処理を修正し,set_enableメソッドを呼び出すようにします。

サービスの切り替えの修正

  box.addEventListener('click', function(){
    //service.enable = box.checked;
    service.set_enable(box.checked);
  },false);

ここでのポイントは,localStorageに触る部分をBackground Pageに集約している点です。こういったデータを扱う処理は1か所にまとめるのが望ましく,1か所にまとめるといえばBackground Pageとなります。なお,このほかに設定項目として,ウェブページ内にブックマーク数を表示する機能のON/OFF,ブックマーク数を表示しないURLを指定するフィルタリングの設定なども実装しましたが,仕組みとしてはほとんど変わらないため,説明は割愛させて頂きます。

設定ページのスタイル

さて,設定ページの機能は実装できましたが,見た目について調整していません。開発者向けとしてはこのままでも良さそうですが,ちょうどExtensionsの設定ページ用のスタイルChromium-extensionsグループで公開されていましたので,そちらを利用してみます。

Chromium-extensionsグループのダウンロードページに,DemoNativeOptions.crxというファイルがあります。こちらに含まれるchrome-native-look.cssというCSSファイルをお借りしました。

設定ページのHTML

<ul class="tabs" id="menu_tabs">
  <li class="basics"><a href="" class="active"><span>機能</span></a></li>
  <li class="filters"><a href=""><span>フィルタ</span></a></li>
</ul>
<section id="basics" class="content">
  <input type="checkbox" id="config_inline">
  <label for="config_inline">Web ページ内でのブックマーク数の表示</label>
  <p class="indent">
    <a href="http://b.hatena.ne.jp/guide/firefox_addon" target="_blank">はてなブックマーク Firefox 拡張</a><a href="http://wiki.github.com/hatena/hatena-bookmark-xul/web" target="_blank">Web ページ内にはてなブックマークの情報を表示する</a>機能を参考にしています。</p>
  <h3>使用するサービス</h3>
  <ul id="service_list">
  </ul>
</section>
<section id="filters" class="content hide">
  <p>ブックマーク数を表示したくないページのURLを正規表現で指定できます。</p>
  <ul id="filter_list">
  </ul>
  <input type="text" id="filter_text" value="">
  <button id="add_filter">追加</button>
</section>
<button class="fright" onclick="window.close();">Close</button>

tabsというクラス名のul要素はタブメニューになり,contentというクラス名を持つ要素がタブの中身になります。一部,sectionを使用したので下記のCSSを追加しました。

追加のCSS

body, ul, li{
  margin:0;
  padding:0;
}
section ul{
  list-style-type:none;
}
section{
  display:block;
}
#filter_list input[type='text']{
  width:300px;
}

タブメニューを制御するスクリプトは下記の通りです。クリックしたボタンのクラス名をactiveに,表示しないタブ(section)のクラス名にhideを加えるだけの処理です。

タブメニューの制御

var sections = $X('/html/body/section[contains(@class, "content")]');
$X('id("menu_tabs")/li/a').forEach(function(btn,i,btns){
  btn.addEventListener('click',function(evt){
    evt.preventDefault();
    btns.forEach(function(btn){btn.className = '';})
    btn.className = 'active';
    var active_id = btn.parentNode.className;
    sections.forEach(function(section){
      if (section.id === active_id){
        section.className = 'content';
      } else {
        section.className = 'content hide';
      }
    })
  }, false);
});

これで,図2のような設定ページが出来上がりました。

図2 設定ページ

図2 設定ページ

著者プロフィール

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

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

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