ブラウザ拡張の開発フレームワークはWXTが最強な件
こんにちは、daichan132です。本記事では、私が実際に数ヶ月間使ってとても良いと感じた、ブラウザ拡張機能フレームワーク「WXT」をご紹介します。
はじめに
WXT（Web Extension Toolkit）は、Chrome・Firefoxなどの主要ブラウザ向け拡張機能を単一のコードベースで開発できる最新のフレームワークで、開発者体験（DX）を重視した設計が特徴です。
WXTの基本概念
WXTは、拡張機能開発の際に発生しがちな設定作業やビルド工程の手間を大幅に削減するために開発されました。以下の点が大きな特徴です。
-
複数ブラウザのマニフェスト自動生成
Chrome (Manifest V3)、Firefox (Manifest V2)に対応 -
高速な開発とホットリロード
Viteを利用しているので、変更が即座にブラウザに反映 -
シンプルなファイル管理
エントリーポイントをファイルで管理し、それを元にmanifest.jsonが自動生成される -
TypeScriptとフレームワーク連携
TypeScript標準対応で、React・Vue・Svelte・Solidなどのフロントエンドフレームワークと簡単に統合可能 -
公開作業の自動化
ZIPパッケージ作成・ウェブストアやアドオンへの自動アップロード対応をしており、Github Actionsの例が公開されている
他のフレームワーク（CRXJS、Plasmo）との比較
CRXJSとの比較
⚠️ CRXJSはもうすぐ開発が止まってしまう可能性が高いので使用はお勧めしません。
CRXJSでは2025年3月31日までにメンテナンスのためのチームが設立されない場合は、CRXJSのリポジトリがアーカイブされます。
https://github.com/crxjs/chrome-extension-tools/discussions/974
Plasmoとの比較
WXTはPlasmoよりも機能が充実しているかつ、開発もWXTの方が活発なので、正直WXTの方を使わない理由はないと思います。より詳しい機能の違いを知りたい人はこちらの記事を参考にすると分かりやすいです。
公式Examplesで学ぶ実装例
WXT公式には多くの実践的なコード例があります。このコード例が凄く便利で、これだけでもWXTを使う理由になると思っています。以下では特に便利な実装例をいくつか紹介します。
-
Active Tab Screenshot
現在表示しているタブのスクリーンショットを撮影する方法が示されています。activeTabという最小限の権限でスクリーンショット機能を実装できるため、初心者にも安全に試せます。 -
React Content Script UI
Reactを使ってShadow DOM内にUIを作成する基本的な方法がわかります。Reactの活用やShadow DOMの理解に役立つ初心者にも実践的なサンプルです。 -
Background Message Forwarder
PopupからアクティブなContent Scriptsへメッセージを転送する仕組みがわかります。これは拡張機能開発において良くやる処理で、実践的な処理のコード例を見ることができます。
他にも良いExampleが沢山あるので、気になるもののコードを眺めてみると楽しいと思います。
最後に
私は『YouTube Live Chat Fullscreen』をWXTを用いて開発しており、ソースコードをGitHubで公開しています。WXTを実際に使用しているソースコードが気になる方は覗いて行ってくれると嬉しいです。
Discussion