🦊

[改変物] Chrome拡張機能テンプレ

1 min read

まえがき

YarnやWebpackやReactを使っていい感じにChrome拡張機能つくりたいな~などと思いました。
さらに言えば、Metamaskの技術スタックを利用してセキュアな拡張機能つくれないかな~などと思いました。
調べると、このようなリポジトリがありました。

https://github.com/samuelsimoes/chrome-extension-webpack-boilerplate

ウンウン、古いね。
ということで、自分のためにアップデートしました。
上記リポジトリ改変のモチベとしては以下です。

改変物

制作物ではないです。
自分向けに改変しただけなので。

https://github.com/0x79756b69/chrome-extension-template

Metamaskの技術

上記2つのライブラリについて、少し書きます。

まず前提ですが、Chrome拡張機能のローカルストレージは暗号化されません。
例えばパスワードなどの情報を保存したいとき、セキュリティ面で厄介です。
そこで、上記2つのライブラリが登場します。

browser-passworderAES-GCMでデータを暗号化します。
obs-storeは、高性能なインメモリDBです。

これら2つのライブラリを利用すると、利用者のパスワードをインメモリDBに保存しておいて、ローカルには暗号化して保存、ローカルのデータが欲しい時に、インメモリDBのパスワードから復号、という形をとることができます。

最後に

みなさま、Chrome拡張機能を制作される際は、生でパスワードを保存するのではなく、暗号化して保存しましょう。

今後、時間がとれた時には以下をやりたいです。

  • WebpackをV5へ
  • ビルドに時間がかかるから、いい感じの方法ないか探す

コントリビュートなど、ウェルカムです(他力本願)。

Discussion

ログインするとコメントできます