chrome extensionでデータを保存する

Chrome拡張でデータを保存しようとした場合に、
最も簡単に扱えるのが、localStorageです。

manifest.jsonの設定

manifest.jsonに以下のパーミッションを追加してください

  "permissions": [
    "storage",
    "unlimitedStorage"
  ],

使い方

localStorageという辞書型の変数が定義されるので、
それに対して読み書きを行うだけで大丈夫です。

localStorage[‘data’] = ‘aaa'
var data = localStorage[‘data’]

注意点

保存形式の制約

この方法で保存できるのは文字列だけになります。
true/falseを保存しても文字列として出てきますし、
オブジェクトを入れても正しく保存されません。

このような場合、JSON.stringifyとJSON.parseを使い、
JSONに変換して保存すると解決します。

読み出せる場所の制約

localStorageはページごとに保存するデータがわかれているため、
読み書きは同じ場所で行う必要があります。

基本的にはbackgruond.jsで読み書きを行い、
content_scriptsやpopupからbackground.jsを呼び出すのがいいと思います。

popupからは以下のように、background.jsの関数を簡単に呼び出すことができます。

// background.jsのgetDataを呼び出す
var data = chrome.extension.getBackgroundPage().getData();

content_scriptsからは直接アクセスできないため、
メッセージを通して呼び出す必要があり、少々面倒です。

まず、background側にメッセージ受け取りと、コールバックを定義します。
content_scriptsからのメッセージ内容がrequestに入っているので、
それによって処理を分けています。

chrome.runtime.onMessage.addListener(function(request, sender, sendResponse) {
  if (request.method == "getUser"){
    sendResponse({user_id: localStorage[request.user_id]});
  }else{
    sendResponse({});
  }
});

content_scriptから呼び出す場合は以下のように、
データとコールバックを渡します。
受け取り側でsendResponse()を読んだときの引数がresponseに入るので、
それを利用してデータを取り出します。

chrome.runtime.sendMessage({method: "getUser", user_id: user_id},
 function(response) {
  if(response.user_name){
    console.log(response.user_name);
  }
});