ブラウザ拡張機能開発フレームワーク WXT で開発ブラウザの初期 URL を設定する

2025/09/02 JavaScript TypeScript

ブラウザ拡張機能開発のフレームワーク WXT の開発用ブラウザの初期 URL を設定する方法を紹介します。

やりたいこと

社内でちょっとしたツールを Web ベースで作成する際に、ホストするだけのサーバーを用意したりするのが面倒で、ブラウザ拡張機能として作成することが多いのですが、ブラウザ機能開発のフレームワークとして WXT を使用しています。
WXT はマルチブラウザ対応や主要フロントエンドフレームワーク」対応、開発サーバー、HMR など機能豊富で開発者体験がよいので採用しています。特にブラウザ拡張機能を作成するときに一番面倒な、テスト時に拡張機能をビルドしてブラウザにロードするという作業が、主要フロントエンドフレームワークと同様 dev コマンド 一発で自動化でき、しかも HMR 対応しているという点がお気に入りです。
さて、この dev コマンドで立ち上がる開発用ブラウザの初期 URL を特定の URL にしたかったのですが、調べてみてもぱっとわからりませんでした。そこで WXT の設定を調べて開発用ブラウザの初期 URL の設定方法を探りたいと思います。

環境

OS
Microsoft Windows 11 23H2
Node.js
v24.1.0
wxt
0.20.6

wxt.config.ts を探る

wxt.config.ts で export している defineConfig() に渡しているプロパティに当たっていけばどこかに設定があるはずと考えます。
defineConfig() の型は以下の通りで、引数の型は UserConfig となっています。

export function defineConfig(config: UserConfig): UserConfig {
  return config;
}

では UserConfig の型を見てみると以下の通りで、InlineConfig 型から configFile プロパティを除いた型となっています。

export type UserConfig = Omit<InlineConfig, 'configFile'>;

InlineConfig 型については WXT 公式の API ドキュメント Interface: InlineConfig – WXT で説明されています。結構な量のプロパティがありますが読み進めていくと、ブラウザスタートアップ設定とか書いてあるプロパティを発見します。

webExt

webExt?: WebExtConfig

Configure browser startup. Options set here can be overridden in a web-ext.config.ts file.
－ Interface: InlineConfig – WXT

webExtConfig は Mozilla が提供するブラウザ拡張機能開発フレームワーク web-ext 向けの設定のようです。WXT は開発用ブラウザの起動等は web-ext に頼っているようですね。

さて、webExtConfig のプロパティを見ていくとそれっぽいプロパティを発見します。

startUrls

startUrls?: string[]

－ Interface: WebExtConfig – WXT

詳細は web-ext のドキュメントを見ろと書いてあるので web-ext のドキュメントを見てみます。ビンゴですね。

--start-url
Open a tab at the specified URL when the browser starts. Example:

web-ext run --start-url www.mozilla.com

To open several tabs, declare this option multiple times. Example:

web-ext run --start-url www.mozilla.com --start-url developer.mozilla.org

Environment variable: $WEB_EXT_START_URL
－ web-ext command reference | Firefox Extension Workshop

webExtConfig.startUrls が string[] となっていたのは一度に複数タブを開くことができるからだったのですね。また環境変数で指定することもできそうですね。

wxt.config.ts の設定

というわけで wxt.config.ts に設定していきます。

import { defineConfig } from 'wxt';

export default defineConfig({
  srcDir: 'src',
  manifest: {},
  webExt: {
    startUrls: ['https://memorandom.whitepenguins.com/'],
  },
});

これで npm run dev を実行すると、無事に開発用ブラウザが指定された URL で立ち上がることを確認できました。

あとがき

WXT はかなり使い勝手よいのですが、Web 上にそこまで情報が多くあるわけではないので、Hello World 以上のことを調べるのは結構大変です。何か発見があればまた記事にしたいと思います。