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);
}
});