Local Storageを使ったChrome Extensionを作る

java-ja温泉で、Local Storageを使用したChrome Extensionを作りました(まだ途中)。
Local Storageと、Chromeのchrome.tabsモジュール、chrome.browserActionのまとめ

Chrome Extensionの準備

ツールバー内のアイコンをクリックすると新しいタブが開くタイプのExtensionを作る場合には、chrome.tabs(タブの操作)、chrome.browserAction(ツールバー内のアイコンからアクションを起こす)を利用します。

manifest.jsonには、以下のプロパティを設定します。

"permission": ["tabs"]
"browser_action": {
	"default_icon": "images/icon.png", // 必須
	"default_titel": "ツールチップとして表示する文字列", //任意
}

今回は、アイコンの表示と、アイコンをクリックしたら新しいタブを開きたいので"permission"、"browser_action"を設定します。

ツールバーのアイコンをクリックは、chrome.browserAction.onClickedで捕まえることができるので、background.htmlでイベントリスナーを用意します。

chrome.tabs.create()のパラメータはドキュメントを参照。

background.html

  <script>
  chrome.browserAction.onClicked.addListener(function(tab) {
    chrome.tabs.create({ url: 'target.html', selected: true });
  });
  </script>

開くHTMLとして指定したtarget.htmlを作成すれば、これだけでアイコンクリック->新規タブを開くことができます。

Local Storage

Local Storageはかなりシンプルに利用できます。

localStorageという名前のグローバル変数に対して、各種操作を行うだけです。

// データをLocal Storageに格納する
localStorage.setItem(KEY, VALUE);
localStorage.KEY = VALUE;
localStorage['KEY'] = VALUE;

// keyに対応する値を取得する
localStorage.getItem(KEY);
localStorage.KEY;
localStorage['KEY']

// keyに対応するデータを削除する
localStorage.removeItem(KEY);

// Local Storageに格納されているデータの件数を取得する
localStorage.length;

VALUEにはJavaScriptのオブジェクトを使用することができますが、Local Storageに格納する場合には予めJSON.stringfy(obj)でデータのJSON化、値を取得する場合には、JSON.parse(localStorage.getItem(KEY))でパースする必要があります。

background.htmlでタブ操作、タブで開くHTMLでLocal Storageの操作をしていけば、とりあえずLocal Storageを利用したChrome Extensionが作成できます。