Chrome拡張機能: コンテンツスクリプトでlocalStorageにアクセスする 質問する

Chrome拡張機能: コンテンツスクリプトでlocalStorageにアクセスする 質問する

ユーザーが特定のオプションを定義して localStorage に保存できるオプション ページがあります。options.html

現在、ページで定義されたオプションを取得する必要があるコンテンツ スクリプトもありますoptions.htmlが、コンテンツ スクリプトから localStorage にアクセスしようとすると、オプション ページから値が返されません。

コンテンツ スクリプトで localStorage、オプション ページ、またはバックグラウンド ページから値を取得するにはどうすればよいでしょうか?

ベストアンサー1

2016年アップデート:

Google Chrome はストレージ API をリリースしました:https://developer.chrome.com/docs/extensions/reference/storage/

他の Chrome API と同様に非常に使いやすく、Chrome 内のどのページ コンテキストからでも使用できます。

    // Save it using the Chrome extension storage API.
    chrome.storage.sync.set({'foo': 'hello', 'bar': 'hi'}, function() {
      console.log('Settings saved');
    });

    // Read it using the storage API
    chrome.storage.sync.get(['foo', 'bar'], function(items) {
      message('Settings retrieved', items);
    });

これを使用するには、マニフェストで定義する必要があります。

    "permissions": [
      "storage"
    ],

「削除」、「クリア」、「getBytesInUse」などのメソッドと、変更されたストレージを監視するイベント リスナー「onChanged」があります。

ネイティブのlocalStorageを使用する(2011年の古い返信

コンテンツ スクリプトは、拡張ページではなく、Web ページのコンテキストで実行されます。したがって、コンテンツ スクリプトから localStorage にアクセスする場合、そのストレージは拡張ページのストレージではなく、その Web ページのストレージになります。

さて、コンテンツスクリプトが拡張機能ストレージ(オプションページで設定した場所)を読み取れるようにするには、拡張機能を使用する必要があります。メッセージパッシング

最初に行うことは、コンテンツ スクリプトに、拡張機能にデータを取得するリクエストを送信するように指示することです。そのデータは拡張機能の localStorage にすることができます。

コンテンツスクリプト

chrome.runtime.sendMessage({method: "getStatus"}, function(response) {
  console.log(response.status);
});

背景.js

chrome.runtime.onMessage.addListener(function(request, sender, sendResponse) {
    if (request.method == "getStatus")
      sendResponse({status: localStorage['status']});
    else
      sendResponse({}); // snub them.
});

これを基に API を実行して、汎用の localStorage データをコンテンツ スクリプトに取得したり、localStorage 配列全体を取得したりすることができます。

それがあなたの問題の解決に役立つことを願っています。

派手かつ一般的なものにするために...

コンテンツスクリプト

chrome.runtime.sendMessage({method: "getLocalStorage", key: "status"}, function(response) {
  console.log(response.data);
});

背景.js

chrome.runtime.onMessage.addListener(function(request, sender, sendResponse) {
    if (request.method == "getLocalStorage")
      sendResponse({data: localStorage[request.key]});
    else
      sendResponse({}); // snub them.
});

おすすめ記事