【Chrome拡張】background内でlocalStorageを使おうとしてドンハマリした【Chrome Extensions】

JavaScript

本番環境・開発環境・テスト環境のURLのサイトパスを維持したままドメインを切り替えて表示させる『The Switcher』をアップデートしようとしているんですよね。詳しくは実装後にお話ししますが、拡張のアイコンを押すだけではなくて、右クリックのコンテキストメニューにもURLの候補を出そうって動いています。

で、serviceworkerであるbackground.jsにオプションで指定したローカルストレージの値が取れなくて疲弊しておりました。

一旦、content_scpiptからbakgroundにメッセージを送って、取得できます!とかの記事がネットに載っているので試してみましたが全滅。テストスクリプトすら動かん。

で、先ほど驚愕の事実が判明しました。だれも記事にしないんだろうな、もうちょっと情報あっても良かったと思うけど、、

serviceWorker(background.js)ではlocalStorageの使用不可

Mozzillaなんですけど書いてありました。

localStorage はサービスワーカーキャッシュと同じように動作しますが、同期処理であるため、サービスワーカー内では許可されていません。

https://developer.mozilla.org/ja/docs/Web/API/Service_Worker_API/Using_Service_Workers

公式ページのとっても分かりにくい場所に……
Chromeも同様にManufest V3から利用できなくなったようです。

ちなみに言い訳ですが、この理由にたどり着くまでに一番最初に視認したコンソールエラーが「localStorage is not defined」ですからね。分からんすよ先輩。

と、いうわけでseviceWorkerではlocalStorrageは使わず、Chrome.storage.local(sync).get()などを使いましょうってことです。でもなぁ、非同期だから処理(JSONの展開)とか少しややこしくなるんだよなぁ。最初からChrome.storageにしておけばよかった。

もし、Chrome拡張でlocalStorageかChrome.storageか迷っていらっしゃる方はChrome.storageをおすすめします。

タイトルとURLをコピーしました