Chrome拡張機能:コンテンツスクリプトでのlocalStorageへのアクセス


157

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

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

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




回答:


233

2016年更新:

Google ChromeがストレージAPIをリリースしました:http : //developer.chrome.com/extensions/storage.html

他の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"
    ],

「remove」、「clear」、「getBytesInUse」、および変更されたストレージ「onChanged」をリッスンするイベントリスナーのメソッドがあります。

ネイティブlocalStorageの使用(2011からの古い返信

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

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

まず、コンテンツスクリプトに拡張機能にデータをフェッチするリクエストを送信するように指示します。そのデータは拡張機能のlocalStorageにすることができます。

contentscript.js

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

background.js

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

その周りのAPIを使用して、一般的なlocalStorageデータをコンテンツスクリプトに取得したり、localStorage配列全体を取得したりできます。

問題が解決したことを願っています。

派手で一般的であるために...

contentscript.js

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

background.js

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

1
当然、リクエストは{method: 'getStorage'、key: 'status'}にもなり、リスナーは対応するデータで応答します。
JCイナシオ

localStorageからすべてを拡張機能に転送したい場合はどうなりますか?書けsendResponse({data: localStorage});ますか?
Bibhas Debnath 2011

私は少し混乱しています。オプションページのデータをbackground.htmlページで利用できるようにしたいので、Backgroundページからcontentscriptにリクエストを送信しますか?contentscriptはlocalStorageデータを送り返すことができますか?これを見てください-> pastebin.com/xtFexFtc ..私はそれを正しく行っていますか?
Bibhas Debnath

7
背景ページとオプションページは同じ拡張コンテキストに属しているため、コンテンツスクリプトやメッセージングは​​必要ありません。localStorageオプションページから直接呼び出すかchrome.extension.getBackgroundPage、オプションページから使用できます。
Mohamed Mansour

1
それは奇妙です。オプションページでいくつかのオプションを設定し、バックグラウンドページでそれらに基づいてコンテキストメニューを作成しています。問題は、オプションページからlocalStorageに変数を設定した場合、拡張機能を無効にして再度有効にしない限り、変数がすぐに背景ページに反映されない(つまり、新しいコンテキストメニューがない)ことです。考えられる理由はありますか?
Bibhas Debnath 2011

47

chrome.storage API を使用した方がよい場合もあります。次のことができるため、localStorageよりも優れています。

  • コンテンツスクリプトと拡張機能の間でメッセージを受け渡す必要なしに、コンテンツスクリプトからの情報を保存します。
  • JSONにシリアル化せずにデータをJavaScriptオブジェクトとして保存します(localStorageは文字列のみを保存します)。

これは、chrome.storageの使用を示す簡単なコードです。コンテンツスクリプトはアクセスしたページのURLとタイムスタンプを取得して保存し、popup.jsはストレージ領域から取得します。

content_script.js

(function () {
    var visited = window.location.href;
    var time = +new Date();
    chrome.storage.sync.set({'visitedPages':{pageUrl:visited,time:time}}, function () {
        console.log("Just visited",visited)
    });
})();

popup.js

(function () {
    chrome.storage.onChanged.addListener(function (changes,areaName) {
        console.log("New item in storage",changes.visitedPages.newValue);
    })
})();

ここの「変更」は、指定されたキーの古い値と新しい値を含むオブジェクトです。「AreaName」引数は、「local」、「sync」、または「managed」のいずれかのストレージ領域の名前を指します。

manifest.jsonでストレージ権限を宣言することを忘れないでください。

manifest.json

...
"permissions": [
    "storage"
 ],
...

onChangedイベントは、すでにデータを提供changesするオブジェクト。さらに、に特別な注意を払うnamespaceonChangedイベント。を使用して何かを保存するとchrome.storage.local.setonChangedイベントがトリガーされますが、を使用した読み取りchrome.storage.sync.getはほとんど意味がありません。
Rob W

はい、そうです、私の回答を編集しました。もちろん、他のシナリオでもchrome.storage.sync.getを使用できますが、ここでは実際に冗長です。
Pawel Miech、2014年

回答のリビジョン5への対応:変更されていないchanges.visitedPages場合、未定義になりますvisitedPagesif (changes.visitedPages) { ... }この問題を解決するには、行を折り返します。
Rob W

弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.