🦊
[改変物] Chrome拡張機能テンプレ
まえがき
YarnやWebpackやReactを使っていい感じにChrome拡張機能つくりたいな~などと思いました。
さらに言えば、Metamaskの技術スタックを利用してセキュアな拡張機能つくれないかな~などと思いました。
調べると、このようなリポジトリがありました。
ウンウン、古いね。
ということで、自分のためにアップデートしました。
上記リポジトリ改変のモチベとしては以下です。
- Chrome拡張のManifestがV3になったので対応
- Metamaskのライブラリを読みこむ
改変物
制作物ではないです。
自分向けに改変しただけなので。
Metamaskの技術
上記２つのライブラリについて、少し書きます。
まず前提ですが、Chrome拡張機能のローカルストレージは暗号化されません。
例えばパスワードなどの情報を保存したいとき、セキュリティ面で厄介です。
そこで、上記２つのライブラリが登場します。
browser-passworderはAES-GCMでデータを暗号化します。
obs-storeは、高性能なインメモリDBです。
これら２つのライブラリを利用すると、利用者のパスワードをインメモリDBに保存しておいて、ローカルには暗号化して保存、ローカルのデータが欲しい時に、インメモリDBのパスワードから復号、という形をとることができます。
最後に
みなさま、Chrome拡張機能を制作される際は、生でパスワードを保存するのではなく、暗号化して保存しましょう。
今後、時間がとれた時には以下をやりたいです。
- WebpackをV5へ
- ビルドに時間がかかるから、いい感じの方法ないか探す
コントリビュートなど、ウェルカムです（他力本願）。
Discussion