WXT + Angularでブラウザ拡張を作る

DRANK

WXTとAngularを組み合わせてブラウザ拡張を開発するためのスターターテンプレートを作成した。Chrome、Firefoxなど複数のブラウザ向けの拡張機能をAngularの最新機能を使って効率よく開発できる。WXTとはWXTはブラウザ拡張機能の開発を効率化するためのフレームワークだ。Viteをベースにしており、高速なHMR（Hot Module Replacement）による快適な開発体験と、ファイルベースでマニフェストを自動生成する仕組みを提供している。特に便利なのは、Chrome、Firefox、Edge、Safariなど複数のブラウザに対応した拡張機能を単一のコードベースから生成できる点だ。Manifest V2とV3の両方をサポートしており、ブラウザごとの差異を吸収してくれる。Angularでブラウザ拡張を作るブラウザ拡張のUI部分はHTMLを読み込むことになるが、WXTでは公式にいくつかのライブラリをサポートしている。wxt initコマンドを実行すると、VanillaやReact, Vueなどのテンプレートを選べるが、まだAngularのテンプレートはない。しかしやることはそれほど難しくないため、VanillaをベースにAngularを使う構成をセットアップすればよい。ただし、AngularをViteで動かすには@analogjs/vite-plugin-angul…