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

options.html

options_page 用の options.js で localStorage に設定値を保存。

options.js

content_scripts 用の content_script で localStorage を直接読み出そうとしたところ…

content_script.js

localStorage に保存した設定値を読み出せず、undefined になりました。content_scripts で使う localStorage は、options_page のものとは別物。

Message Passing でデータをやりとりする

以下の公式ドキュメントに答えが書いてある。
Message Passing – Google Chrome

まず、manifest.json に background.js を追加。

background.js はバックグランドで常に動作するので、この background.js を通してデータをやりとりします。

実際のコードは、Stackoverflow を参考にしました。
local storage – Chrome extension: accessing localstorage in content script – Stack Overflow

background.js でリクエストを待ち受けて、レスポンスを返す。以下の例では、request.key で指定された localStorage の値をレスポンスで返すようにしています。

background.js

一方、content_scripts(content_script.js)では、メッセージ(リクエスト)を送信して、コールバック関数の引数 response として background.js からのレスポンスを受け取れます。

content_script.js

これで、options_page(options.js)で設定した localStorage の値を、content_scripts(content_script.js)内で使うことができました。

スポンサーリンク
 
スポンサーリンク
  • 2件のコメント
  • oxy

    勉強になりました。ありがとうございます。

    • taka

      oxy さん、コメントありがとうございます。
      お役に立てましたようで良かったです^^

Leave Your Message!