6年前のブラウザ拡張機能をWXTでリニューアルした

現在（2024年）

ブラウザ拡張機能の Manifest V3 対応について気になっていた今日この頃。

最近では、Manifest V3 に対応していない拡張機能に対して警告が表示されてしまいます。

この拡張機能は、Chrome 拡張機能のベスト プラクティスに沿わないため、
まもなくサポートされなくなる可能性があります。

この文章を読むと、なんだか辛い気持ちになりますね。

自作アプリを作っては放置してしまう人にはグサグサと刺さりました...

以前に拡張機能を公開したことがあるものの、手を入れることもなく6年間が経ちました。

当然 Manifest V2 のままでしたので、例に洩れず Chrome ウェブストアに警告が表示されていました。

ちなみに中身の実装については、真心を込めて JavaScript を手書きしていました。（TypeScirptやフレームワークとの親しみがなかったのかな。当時の記憶は定かではありませんが...）

最近では、型のないコードに手を入れるのがとても億劫です。

そんなとき WXT について知りました。

次世代って響きがかっこいいので採用です。 JavaScript を手書きする必要もなさそうですね！

ちょうど良いので、放置していた拡張機能の Manifest V3 対応も兼ねて WXT によるモダンな拡張機能の作り方を学ぶことにしました。

Plasmo や Extension.js といった WXT 以外のフレームワークは未経験なので、6年前の手書き体験と比較した感想になります。（なので良いところしか出てこないと思う）

バンドラーとして Vite が採用されており、ポップアップやオプションページでお気に入りの UI ライブラリのエコシステムを享受できます。 Frontend Frameworks – WXT

今回は React と shadcn/ui に全乗っかりさせていただきました。ありがとうございます。

拡張機能の設定を永続化した Storage を watch できるため、React とコンテンツスクリプトの間で設定を簡単に同期することができました。

Chrome と Firefox 向けのパッケージをまとめてビルドできるため、リリース作業も簡単でした。

長らく放置していた拡張機能ではありますが、Manifest V3 対応とともに今どきなデザイン（作者の主観）でリニューアルすることができました。この機会にぜひご利用ください。