拡張機能のフレームワークWXTでOptionsの作り方
· 4 min read
ブラウザ拡張機能のフレームワークWXTでOptions(オプションページ)を作る方法を解説します。
WXTの概要を知りたい方は以前書いた記事WXTとSvelteでChrome拡張機能の開発をご覧ください。
Optionsの構成
WXTでは、Options、Background、Content Scriptのような機能ごとにエントリーポイントを分けます。
エントリーポイントは次のようにディレクトリを切っても切らなくてもよいです。
entrypoints/options/index.html
entrypoints/options.html
たいていの場合、フロントエンドのフレームワークを使ってApp.tsx
やApp.svelte
なども一緒に置いておくことが多いため、最初からディレクトリを用意しておいたほうがよいでしょう。
エントリーポイントに書く内容
エントリーポイントとなるHTMLファイルには、通常どおりマークアップするだけで問題ありません。
ただし、いくつかの特別なタグがあるので紹介します。
テンプレート
先によく使いそうなテンプレートを載せておきます。script
の中でフレームワークのマウント処理をするmain.ts
を読み込みます。
オプションページをタブで開く
デフォルトでは、Optionsは拡張機能の管理画面に表示されます。
次の画像がその実例です。暗くなっている背景が管理画面で、OptionsのUIはやや小さめに表示されています。
次のようなmetaタグを書くことで、オプションページをタブで開けます。
実際に、.output/chrome-mv3/manifest.json
のような生成されたmanifestを見ると、open_in_tab
がtrue
になっていますね。
metaタグのname="manifest.foo"
でOptionsに関わるmanifestを設定できるようです。
他のmetaタグ
ブラウザによってオプションページが必要なければ、manifest.exclude
に指定できます。
たとえば、次のように指定するとChromeとFirefox向けにビルドする時にOptionsが除外されます。
content
の配列で指定できるブラウザは、公式ドキュメントを見たところchrome
、firefox
、safari
、edge
のようですね。
逆にexclude
ではなくinclude
もあるようです。
以上、WXTを使ったOptions(オプションページ)の作り方でした。
OptionsはBackgroundやContent Scriptと違って拡張機能の独自の書き方が少ないため、意外とあっさり作れますね。