- 更新日: 2015年1月6日
- Chrome Extension
Chrome Extensionでoptions_pageで設定したlocalStorageの値をcontent_scriptsから読み込む
Google Chrome Extension の作成で、options_page で設定値を localStorage に保存して、それを content_scripts から普通にダイレクトに読み込もうとしたらできませんでした。options_page の localStorage と content_scripts の localStorage は別物になるのが原因。options_page はコンテキストが extension であるのに対し、content_scripts のコンテキストは tabs（タブ）であるためです。
画像付き英語辞書 Imagict | 英単語をイメージで暗記content_scripts から直接 localStorage は読み込めない
まず最初の失敗例、以下のやり方だとだめ。
manifest.json
|
1 2 3 4 5 6 7 8 9 10 |
{ "options_page": "options.html", "content_scripts": [ { "matches": [ "http://*/*", "https://*/*", "file://*" ], "js": [ "content_script.js" ] } ] } |
options.html
|
1 2 3 4 5 6 7 8 9 10 11 |
<!DOCTYPE HTML> <html lang="ja"> <head> <meta charset="UTF-8"> <title></title> </head> <body> ... <script src="options.js"></script> </body> </html> |
options_page 用の options.js で localStorage に設定値を保存。
options.js
|
1 |
localStorage['key'] = 'value'; |
content_scripts 用の content_script で localStorage を直接読み出そうとしたところ…
content_script.js
|
1 |
localStorage['key']; // => undefined になる |
localStorage に保存した設定値を読み出せず、undefined になりました。content_scripts で使う localStorage は、options_page のものとは別物。
Message Passing でデータをやりとりする
以下の公式ドキュメントに答えが書いてある。
Message Passing – Google Chrome
まず、manifest.json に background.js を追加。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
{ "background": { "scripts": ["background.js"] }, "options_page": "options.html", "content_scripts": [ { "matches": [ "http://*/*", "https://*/*", "file://*" ], "js": [ "content_script.js" ] } ] } |
background.js はバックグランドで常に動作するので、この background.js を通してデータをやりとりします。
実際のコードは、Stackoverflow を参考にしました。
local storage – Chrome extension: accessing localstorage in content script – Stack Overflow
background.js でリクエストを待ち受けて、レスポンスを返す。以下の例では、request.key で指定された localStorage の値をレスポンスで返すようにしています。
background.js
|
1 2 3 4 5 6 |
chrome.runtime.onMessage.addListener(function(request, sender, sendResponse) { if (request.method == "getLocalStorage") sendResponse({data: localStorage[request.key]}); else sendResponse({}); // snub them. }); |
一方、content_scripts（content_script.js）では、メッセージ（リクエスト）を送信して、コールバック関数の引数 response として background.js からのレスポンスを受け取れます。
content_script.js
|
1 2 3 |
chrome.runtime.sendMessage({method: "getLocalStorage", key: "status"}, function(response) { console.log(response.data); }); |
これで、options_page（options.js）で設定した localStorage の値を、content_scripts（content_script.js）内で使うことができました。
- – 参考リンク –
- Chrome extensionのcontent_scriptsから設定情報を読み込むことを試しました – Qiita
- chrome extensionでデータを保存する – おおたの物置
- Google Chrome extension上で、localStorageの中身がundefined – QA@IT
- Chrome Extension の関連記事
- Chrome拡張・アプリをテストユーザー(テスター)にのみ公開する方法
- GoogleアナリティクスでChrome拡張のcontent_scriptsをアクセス解析する
- Chromeアプリや拡張機能のChromeウェブストアへの公開手順
- Chrome拡張をGoogle Analyticsで解析する方法まとめ
- chrome.runtime.sendMessageでメッセージ通信
- chrome.storageでchrome extension用のデータを保存・取得
- Google Chrome拡張機能(extension)のi18n国際化
- 2件のコメント
勉強になりました。ありがとうございます。
oxy さん、コメントありがとうございます。
お役に立てましたようで良かったです＾＾