web-dev-qa-db-ja.com

Chrome拡張：コンテンツスクリプトのlocalStorageへのアクセス

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

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

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

google-chrome-extensionlocal-storagecontent-script
143
user476214

更新2016：

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

他のChrome AP​​Iと同様に使用するのは非常に簡単で、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からの古い返信）

コンテンツスクリプトは、拡張ページではなく、Webページのコンテキストで実行されます。したがって、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.
});
218
Mohamed Mansour

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

  • コンテンツスクリプトの情報を保存しますメッセージの受け渡しなしコンテンツスクリプトと拡張機能の間;
  • データをJavaScriptオブジェクトとして保存 JSONにシリアル化せずに（ 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"
 ],
...
42
Pawel Miech

別のオプションは、chromestorage APIを使用することです。これにより、セッション間のオプションの同期を使用してユーザーデータを保存できます。

1つの欠点は、非同期であることです。

https://developer.chrome.com/extensions/storage.html

7
Jason