目次

• localStorageとは
• localStorage APIについて
• Chrome ExtensionsでlocalStorageを使う際の問題点
• データの橋渡し用にbackground.jsを使う
• chrome.runtime APIでメッセージのやり取りを実装
• まとめ

localStorageとは

まず最初にlocalStorageについて説明します。すでにlocalStoregaについて把握されている方は読み飛ばしてください。

ブラウザは、Web Storageというクライアントサイドのストレージ（記憶装置）を持っています。localStorageは、その「Web Storage」を実装しているブラウザのwindowオブジェクトのプロパティで、Web Storageに対してデータの読み書きなどを行う機能を提供しています。

localStorageには以下のような特徴があります。

localStorageの詳細は以下をご参照ください。

• Web Storage－HTML5のAPI、および、関連仕様
• モダンブラウザのストレージ容量と調査方法まとめ – HTML5 Rocks

localStorage APIについて

localStorageは、通常のJavaScriptオブジェクトと同じように扱うことができます。プロパティを設定してデータを保存し、プロパティを読み出してデータを取得します。

// key名'foo'に1を保存
localStorage.foo = 1;

// key名'foo'の値を取得
console.log(localStorage.foo); // => 1

上記の方法でもlocalStorageを扱えますが、以下のような公式のAPIも定義されています。

プロパティ

メソッド

APIの使用例

以下はlocalStorage APIの使用例となります。

// Key名'foo'にValueとして「1」を保存
localStorage.setItem('foo', 1);
// Key名'bar'にValueとして「2」を保存
localStorage.setItem('bar', 2);

// localStorageに保存したアイテム数を取得
console.log(localStorage.length); // => 2

// localStorageの0番目のkey名を取得
localStorage.key(0); // => 'foo'
// localStorageからkey名'foo'の値を取得
localStorage.getItem('foo') // => 1

// localStorageからkey名'foo'とその値を削除する
localStorage.removeItem('foo'); // => localStorage.lengthは1
// すべてのデータを削除する
localStorage.clear(); // => localStorage.lengthは0

[参考]

• Storage – Web APIs | MDN
• Web Storage (Second Edition)#storage – W3C

ちなみにlocalStorageに保存したデータはDevelopertoolsの「Resources」の部分で確認できます。データの追加、更新、削除などもここで行うことが可能です。

Chrome ExtensionsでlocalStorageを使う際の問題点

localStorageの話がだいぶ長くなりましたが、これから本題となります。上記の通り、localStorageの特徴を考慮すると、ちょっとしたWebのアプリケーションを作るのであれば、保存領域として使うのにlocalStorageで十分なケースが多いんじゃないかと思います。特にブラウザ上で動くChrome Extensionsであれば、かなり親和性も高いです。Chrome Extensionsの開発でlocalStorageを使という話はよく聞きます。

ただここで注意が必要です。上記でも述べましたが、localStorageは「ドキュメントの出身によってスコープが異なる」ということです。Chrome Extensions内で完結するものであれば、特に問題はないと思いますが、ブラウザで表示しているWebサイトから取得したデータをlocalStoregeに保存して、Chrome Extensionsでそのデータを取得したり、またその逆でChrome Extensionsで保存したデータをブラウザで表示しているWebサイト上で取得したりすることができません。

localStorageのスコープについて、ここで少し詳しく説明しておきます。localStorageはドキュメントの出身（プロトコル、ホスト名、ポート番号）によってスコープが異なります。ドキュメントの出身が異なると、データを取得したり、上書きしたりすることができません。例えば、以下のURLはすべてドキュメントの出身が異なることになります。

つまり、Chrome ExtensionsとWebサイト間でのデータのやり取りがそのままではできない仕様となっています。

データの橋渡し用にbackground.jsを使う

上記のスコープの問題を解決する方法として、Chrome Extensionsに用意されているbackground.jsを使ってChrome ExtensionsとWebサイト間のデータの橋渡しをさせるようにします。

background.jsはその名の通り、Chrome Extensionsのバックグラウンドで実行されるスクリプトファイルとなります。

• Background Pages – Google Chrome

background.jsを使う場合は、manifest.jsonに以下のように記載します。

{
  "manifest_version": 2,
  ...
  "background": {
    "scripts": ["background.js"]
  },
  "browser_action": {
    ...
    "default_popup": "popup.html"
  },
  "content_scripts": [
    {
      "matches": [
        "https://example.com/*"
        ...
      ],
      "js": ["bundle.js"]
    }
  ],
  ...
}

肝心のbackground.jsをどのように使うかというと、Webサイト上（content_scripts上）で行いたいlocalStorageへの命令を、すべてこのbackground.jsで行うようにします。localStorageのスコープはバックグラウンドページとして形成されるので、 browser_action（popup.html）からは直接localStorageを扱えるようになります。Webサイト（content_scripts）とbackground.js間のやり取りはChrome Extensionsのchrome.runtime APIを使って行うようにします。

chrome.runtime APIでメッセージのやり取りを実装

chrome.runtime APIはbackgroundページを検索したり、manifestの詳細な情報を返したり、Webアプリやエクステンションのライフサイクルの中でのイベントの購読や応答を行うために使うAPIです。

• chrome.runtime – Google Chrome

ここでのchrome.runtime APIの用途は以下のとおりとなります。

background.jsにおけるchrome.runtime APIの実装

まずbackground.jsから処理を書いていきます。Webサイト上（content_scripts上）から受け取るメッセージごとに実行する処理を登録しておくイメージとなります。Webサイト上（content_scripts上）から送られたメッセージを受け取るには、chrome.runtime.onMessage.addListener(callback)メソッドを使います。メッセージが送られるとcallback関数を実行します。

上記で説明したlocalStorageのAPIのプロパティやメソッドを実行するために、以下のようにそれぞれ名前をつけて登録しておきます。

chrome.runtime.onMessage.addListener(function(request, sender, sendResponse) {
  switch (request.method) {
    case 'getLength': // 保存されているデータ数を取得
      sendResponse({data: localStorage.length});
      break;
    case 'getKeyName': // 指定されたn番目のkey名を取得
      sendResponse({data: localStorage.key(request.number)});
      break;
    case 'getItem': // 指定されたkeyの値を取得
      sendResponse({data: JSON.parse(localStorage.getItem(request.key))});
      break;
    case 'setItem': // 指定されたkeyと値を保存（更新）
      sendResponse({data: localStorage.setItem(request.key, request.value)});
      break;
    case 'removeItem': // 指定されたkeyの値を削除
      sendResponse({data: localStorage.removeItem[request.key]});
      break;
    case 'clearAll' //　すべてのデータを削除
      sendResponse({data: localStorage.clear()});
      break;
    default:
      console.log('no method');
      break;
  }
});

content_scriptsにおけるchrome.runtime APIの実装

content_scripts（Webサイト）では、background.jsに登録した処理名とその処理に必要な値をchrome.runtime.sendMessage()メソッドの引数にセットして、localStorageに処理を加えたい箇所で実行するようにします。

// localStorageに保存されているkey名'foo'の値を取得する場合
chrome.runtime.sendMessage({method: 'getItem', key: 'foo'}, function (response) {
  if (response.data) {
    console.log(response.data);
  }
});

// localStorageにkey名'baa'として値2を保存する場合
chrome.runtime.sendMessage({method: 'setItem', key: 'foo', value: 2});

// localStorageのkey名'foo'の値を削除する場合
chrome.runtime.sendMessage({method: 'removeItem', key: 'foo'});

browser_actionからlocalStorageを扱う場合

browser_action（default_popupに指定したhtmlファイル）からは、直接localStorageにアクセスすることができるので、chrome.runtime APIを使う必要はありません。普通にlocalStorage APIを使ってデータの取得、更新、削除を行ってください。

まとめ

以上、特に難しいことをしないのであれば、chrome.runtime.onMessage.addListener()メソッドとchrome.runtime.sendMessage()メソッドを使った処理をそれぞれbackground.jsとcontent_scripts（Webサイト）に書くだけでChrome ExtensionsでlocalStorageを使えるようになります。background.jsというファイルを用意したり、一見複雑になりそうな感じもしますが、実際に実装してみると意外とこんなものかというくらいあっさり実装できてしまうと思います。

上でも述べましたが、Chrome ExtensionsとlocalStorageは親和性がとても高いです。Chrome Extensionsの開発でlocalStorageを使えるようになったら、開発できるプロダクトの幅も広がってくるので、ぜひここは抑えておきたいところだと思います。ぜひ参考にしてもらえらばと思います。

以下の通称サイ本は若干古いですが、localStorageについてもしっかり書かれていて参考になります。最後に紹介しておきます。