QA@IT

Google Chrome extension上で、localStorageの中身がundefined

8517 PV

最近Google Chrome拡張を作り始めました。
環境はWindows 7、Chrome 27.0.1453.116、 manifestのバージョン2です。

オプション(options_page)のjsでユーザーが設定した値を保存するためにlocalStorageを用いて
値を下記のように保存しました。

localStorage['key'] = 'val';

その後、その保存した値をコンテントスクリプト(content_scripts)内のjsで、呼び出して利用しようと思いました。

var key = localStorage['key'];

しかし、keyの中身は想定していた「val」ではなく、「undefined」でした。
これはどういうことなのでしょうか?

cookie見たくドメインの届く範囲に無いからでしょうか?
また別の理由でしょうか?その場合、別手段も教えて頂けると幸いです。

皆様、よろしくお願い致します。

  • その後ChromeのDeveloper Tools使って、それぞれchrome-extensionの時のLocalStorageの中身、content script呼び出してるページ時のLocalStorageの中身確認してみたところ、ドメインの範囲でアクセス出来る範囲の関係でアクセス出来なかったことが分かりました。バッチリそれに該当する回答もstackoverflowにて発見出来ました! -
  • 因みに http://stackoverflow.com/questions/3937000/chrome-extension-accessing-localstorage-in-content-script です! -
  • 逆のパターン(chrome-exntension側にはLocalStorageデータ無く、content script側にLocalStorageデータあり)の場合もあるので、それも考えてみたいと思います。どうも、お騒がせ致しました。 -
  • あれ…これ自己解決した場合は、質問閉じれないのでしょうか? -

回答

自己解決されているようなのでいまさらですが・・・

content_scripts の localStorage はタブで表示しているサイトの localStorage で、options や popup や background の localStorage は拡張 (chrome-extentions://<extention-id>) の localStorage なので異なるものです (content_scripts で localStorage を弄るとタブで表示しているサイトの localStorage を弄ってしまう)。

content_scripts とその他の拡張のページ(やスクリプト)で対話するには sendMessage や postMessage でやり取りする必要があります。

追記

コメントの通り、permissions で storage を追加する方法もあるようなので試してみました。
次のように options ページの js と content スクリプト の js を使って、options ページ で保存した情報を content スクリプトで取得することが出来ましたー

options.js

$(function(){
    $('#save').click(function(){
        var color = $('#color').val();
        chrome.storage.local.set({color:color}, function(){
            console.log("chrome.storage.local.set", "saved");
        });
    });
});

content_script.js

$(function(){
    chrome.storage.local.get(function(items) {
        console.log(items.color);
    });
});
編集 履歴 (1)
  • 解決済みでも回答有難う御座います!
    それに気づかず1日嵌っていました。
    あと、stackoverflow投稿の最後の方にもちょとっと書いてあった、permissionのstorageも使えるみたいですね。ただし、非同期型みたいですが。
    -
  • おぉ、そんな方法もあったのですか、教えたつもりが教えられてしまいました(汗) -
  • わざわざ追加まで有難うござました。教えられた方法で書いてみたら、問題なく出来ました! -
ウォッチ

この質問への回答やコメントをメールでお知らせします。