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