WXTでブラウザ拡張機能を開発!モダンな開発環境でクロスブラウザ対応も楽々

単一コードベースで複数ブラウザ対応の拡張機能を開発できるフレームワークWXTを紹介。環境構築から基本的なプロジェクト構成、おすすめ設定までを解説します。

はじめに

こんにちは！
自社製品 UIテスト自動化ツール SKYATT の開発をしています。
開発の過程で、製品にブラウザ拡張機能を搭載する必要がありました。
ブラウザ拡張機能の開発を始めるにあたり、初めにぶつかった課題が、複数のブラウザへの対応をどう開発効率よく行うかでした。
この課題を解決するために、WXT（Web Extension Toolkit）を使用することにしました。
本記事では、WXTを使用してブラウザ拡張機能を開発する方法についてご紹介します。

WXTとは

WXTは、次世代ウェブ拡張フレームワークと銘打っており、Chrome、Firefox、Edge、Safariなどの主要なブラウザ向けの拡張機能を単一のコードベースで開発できるフレームワークです。
Viteをバンドラーとして採用し、TypeScriptを標準対応、Reactやその他のUIライブラリとも簡単に統合できるモダンな開発環境を提供します。
ライブリロードにも対応しており、変更内容をリアルタイムに確認しながら開発を進めることができます。

環境構築

WXTを使用するための環境構築は非常に簡単です。
以下の手順で進めます。

1. Node.jsとnpmをインストールします。

2. プロジェクトディレクトリを作成し、WXTをインストールします。

コマンド内でプロジェクトのテンプレートの選択があるため環境に合わせて選択します。

npx wxt@latest init

3. 依存するパッケージのインストールを行います。

npm install

4. デバッグビルドを行います。

ブラウザが起動し、テンプレートの拡張機能が自動でインストールされます。

npm run dev

プロジェクト構成

WXTにおける主要なフォルダやファイルは以下のとおりです。
基本的にbackground.tsやcontent.tsを編集して拡張機能のUIやふるまいを実装していきます。

.
├── assets             // ビルド時にWXTで処理する必要があるリソース。auto-iconsを使用する場合はここにアイコンを配置する。
├── entrypoints        
│   ├── background.ts  // バックグラウンドで動作するスクリプト
│   ├── content.ts     // Webコンテンツで動作するスクリプト
│   └── popup/         // 拡張機能のUI
├── public             // ビルド時にそのまま出力したいリソース。auto-iconsを使用しない場合はここにアイコンを配置する。
└── wxt.config.ts      // プロジェクトの設定ファイル。拡張機能のmanifestはここで定義する。

サンプル集

WXTの公式サイトではプロジェクトのサンプル集が公開されています。

おすすめの設定

wxt.config.tsでは、ビルド実行時のふるまいやmanifestの定義が行えます。
おすすめの設定内容を以下に記載します。

import { defineConfig } from 'wxt';

export default defineConfig({
    // 128pxのアイコン1つ用意すれば他サイズは自動生成してくれるプラグイン
    modules: ['@wxt-dev/auto-icons'],
    // ビルド実行時のふるまい
    webExt: {
        // ブラウザ起動時の初期URL
        startUrls: ["https://www.skygroup.jp/tech-blog/"],
        // Chrome_Firefoxと違いEdgeはパス設定しないと起動できなかったためパスを明示的に指定
        binaries: {
            edge: "C:\\Program Files (x86)\\Microsoft\\Edge\\Application\\msedge.exe",
        }
    },
    // 拡張機能のマニフェスト定義
    manifest: ({ browser }) => {
        const config: any = {
            name: "拡張機能の名前",
            version: "1.0",
            version_name: "1.0",
            description: "拡張機能の説明文",

        };
        // chromiumベースのブラウザとfirefoxでは拡張機能のIDの宣言の仕方が異なる
        if (browser === "chrome" || browser === "edge") {
            config.key = "拡張機能のID";
        }
        else if (browser === "firefox") {
            config.browser_specific_settings = {
                gecko: {
                    id: "拡張機能のID",
                    // 公開審査時に必須となる項目、実態に沿って設定する
                    "data_collection_permissions": {
                        "required": ["none"]
                    }
                }
            }
        }
        return config;
    },
    vite: ({ mode }) => ({
        esbuild: {
            // リリースビルドにおいてログ出力を抑制したい場合
            pure: mode === "production" ? ["console.log", "console.info"] : [],
        }
    }),
});