ブラウザ拡張機能のためのフレームワークWXTがいい感じ

WXT（Web Extension Tools）という、ブラウザ拡張機能を快適に開発するためのフレームワークの存在を知った。

Next-gen Web Extension Framework – WXT

WXT provides the best developer experience, making it quick, easy, and fun to develop web extensions. With built-in utilities for building, zipping, and publishing your extension, it

wxt.dev

数年前にNotion(Web)のニッチなChrome拡張機能を作ってストアに出したんだけど、そのときの開発体験(フレームワークなし)はどんな感じだったかなーと思い出して比べながら使ってみた。

例えばストアに出すにあたってmanifest.jsonなどの設定ファイルやzipファイルを自分で作る必要があったんだけど、WXTにはそれらが自動生成できる仕組みが備わっているのは良い点。なんならストア公開するCLIが備わっている、すごい。

entrypoints/ディレクトリにファイルを置くだけで、自動的にmanifest.jsonに反映される。

  my-extension/
  ├── entrypoints/
  │   ├── background.ts      → background service worker
  │   ├── popup.html         → ポップアップUI
  │   ├── content.ts         → コンテントスクリプト
  │   └── options.html       → オプションページ
  ├── wxt.config.ts          → 設定ファイル

あとはコード変更のたびに手動リロードが必要だった気がしたけど、HMRがpopup, content script, background全てに対応しているので開発がらくちん。

ブラウザ拡張機能そのものの根本的なアーキテクチャが変わらない限りはこのフレームワーク使って開発するのが良い気がした。