ブラウザ拡張機能のフレームワーク

以前、chrome拡張をcrxjsで作成したが新しいフレームワークが出ているようなので試してみる
あとマニフェストバージョンが最後に触ったのはv2で最新はv3なのでchrome拡張の仕様も変わってるかもしれないので併せて調査

以前作った拡張機能
https://github.com/tkc310/chupacabra

早速、比較の良記事を発見
https://zenn.dev/cybozu_frontend/articles/introduction-browser-extensions-tools

• wxt / plasmo / extension.jsがナウイらしい
  • https://github.com/wxt-dev/wxt
  • https://github.com/PlasmoHQ/plasmo
  • https://github.com/extension-js/extension.js
• ビルドツール
  • wxt: vite
  • plasmo: parcel
  • extension.js: tsup & webpack?
• plasmoが圧倒的に人気
  https://npmtrends.com/extension-vs-plasmo-vs-wxt
• plasmoは有料で豊富な機能を提供している
• extension.jsは薄くてクイックに使える

ビルドツール的にはviteのwxtだけど、総合的にplasmoが良さそうだな

UIの表現方法

拡張機能が提供するUIは下記の選択肢がある

• popup page
  拡張機能アイコンのクリック時などにポップアップを表示
  タブで開いているサイトのコンテンツの参照・変更が可能
• side panel
  popupのサイドパネル版 (コンテンツの横幅を占領)
• options page
  新しいタブで拡張機能用のページを表示
  popupのようにコンテンツは参照できないため、拡張機能の設定やデータの参照などを行う役割
• new tab page
  タブを追加した時に検索窓とショートカットが出てくるページをカスタマイズできる
• devtool page
  devtoolに拡張機能専用のタブ・ページを追加する (e.g. reactやvueの拡張機能)
• context menu
  右クリック時のメニューをカスタマイズできる

処理の種類

処理はcontent script / backgroud scriptの2種類がある

contentはサイトコンテンツの参照ができてbackgroudはできない
backgroudはserviceワーカーが利用できるため、その名の通りcontentとは別スレッドで処理を動かすことができる
contentのスレッド(描画やユーザー操作)をブロックしないように、重い処理はbackgroudで非同期に処理して完了したらメッセージ(イベント+ペイロード)でやりとりを行う

大まかな設計

UIとcontent/background(以下script)はメッセージを通じてやり取りする方式で大抵のユースケースは満たせそう。

• scriptでイベントを監視 chrome.runtime.onMessage.addListener して、コールバックでサイトコンテンツの参照・変更を行う
• UIからイベントを発行 e.g. chrome.tabs.sendMessage して、必要に応じてUI上で指定されたパラメータなどをペイロードとして渡す
• scriptからの戻り値を必要に応じてUIから参照して処理結果などを表示する (scriptからもwindow.alertなどは実行できる)

plasmo使ってみる

$ pnpm create plasmo .
$ npm run dev

デフォルトだとpopup式のUIが適用されたテンプレートが生成される

拡張機能ページでデベロッパーモードを有効にして ./build/build/chrome-mv3-dev/ というディレクトリを読み込むと拡張機能が表示されるため、表示された拡張機能をクリックするとポップアップが表示される

その他のテンプレート

pnpm create plasmo <name> -- with-vue のようにテンプレートを指定できる。
exampleがあるため下記を参照
https://github.com/PlasmoHQ/examples

各フレームワークについて追記

• plasmo
  manifest.jsonとpopup.js, content.jsの連携が抽象化されているけど逆に使いにくかった。
  マッピングは難しくないので細かい制御やディレクトリ構成にしたい時はスクラッチ or crxjs位の薄さが良さそう。
  あとtailwind関連のテンプレートが古くてセットアップに時間が掛かった (v4に対応していない)
  preactはテンプレートすら存在しない (parcel用のセットアップヒントがdocに記載されているだけ)
• extension.js
  preactテンプレートが古くて動かなかった

機会があればwtxを使ってみる (最終的にcrxjsに出戻りしそうな気配)