Blog スタッフブログ

こんにちは、株式会社MIXシステム開発担当のBloomです。

今回はChromeやEdgeなどのブラウザ拡張機能を開発できるフレームワーク「WXT」の導入手順についての備忘録を記載していきたいと思います。

WXTとは

WXTはChromeやEdgeなどのブラウザ拡張機能を開発するためのフレームワークです。

Chrome拡張機能で現在利用されているManifest V3にも対応しており、VueやReactなど普段Web開発で利用しているフレームワークを使って拡張機能を開発できます。

また、開発中のHot Module Replacementや拡張機能のリロードにも対応しているため、通常のJavaScriptから拡張機能を開発する場合と比べて、開発環境を簡単に構築できる点も特徴です。

今回はVueを利用してWXTのプロジェクトを作成してみます。

WXTプロジェクトを作成

Node.jsおよびnpmが利用できる環境で、ターミナルから下記のコマンドを実行します。

npx wxt@latest init

コマンドを実行すると、プロジェクト名や利用するフレームワークなどを選択できます。

WXTではVanillaのほか、VueやReact、Svelte、Solidなどのテンプレートが用意されています。今回はVueを選択しましょう。

プロジェクトの作成が完了したら、作成されたディレクトリへ移動してnpm installで必要なパッケージをインストールしましょう。

インストール時にはWXTの準備処理も実行され、開発に必要なファイルや型定義などが生成されます。

開発環境を起動する

パッケージのインストールが完了したら、npm run devを実行しましょう。

WXTの開発モードが起動し、拡張機能が読み込まれたブラウザが起動します。筆者環境ではChromeが起動しています。

WXTでは開発中にファイルを編集すると、変更内容に応じてHMRや拡張機能のリロードが行われます。

そのため、コードを変更するたびにChromeの拡張機能管理画面を開いて、手動で拡張機能を読み込み直す必要がほとんどありません。

プロジェクト構成

WXTでは、主に「entrypoints」ディレクトリ以下へ拡張機能の処理を記述していきます。

例えば下記のような構成になります。

entrypoints/
├── background.ts
├── content.ts
└── popup/
    ├── index.html
    └── App.vue

「background.ts」はバックグラウンドで動作する処理、

「content.ts」は表示しているWebページ上で動作するContent Script、

「popup」はChromeなどのツールバーに表示される拡張機能アイコンをクリックした際の画面として利用できます。

通常のChrome拡張機能ではmanifest.jsonへ各スクリプトや権限などを記述していきますが、WXTではファイルベースのEntrypointを利用してManifestを生成してくれます。

そのため、一般的なWebフレームワークに近い感覚でブラウザ拡張機能を開発できます。

これだけで拡張機能の開発環境が整いました。良かったですね。