Yakitユーザーにとって、設定不要のブラウザ環境は大きな利便性を提供しています。ワンクリックで、事前に設定済みのYakit MITMプロキシ環境を持つブラウザが起動され、通常のブラウザと完全に分離された運用が可能です。

この体験をさらに強化し、従来のProxy SwitchyOmegaのような切り替え機能を代替するため、独自のブラウザ拡張機能を開発しました。現在、設定不要ブラウザの起動は、固定のchromeFlagsではなく、--load-extensionオプションを使って自作の拡張を読み込む形になっています。

拡張機能は、現在アクセス中のページがhttp://mitm/である場合に、content.jsを注入して「現在プロキシ制御中」という通知を表示します。また、拡張をツールバーにピン留めすることで、後続の操作がよりスムーズになります。

注：現在のフローティングUIは、特定のドメインにアクセス時のみ表示されます。他のサイトでは拡張アイコンから手動で操作可能です。

デフォルトのプロキシ設定は、「設定不要Chromeを起動」時に指定した値（例：http://127.0.0.1:9999）に基づいています。拡張の有効化後、ブラウザは通常の動作と同様に扱えます。

• [Yakit MITM]を選択すると、通信はすべてYakitのMITMプロキシ経由で処理されます。
• [システムプロキシ]を選択すると、通常のブラウザと同じように直接接続され、Yakitのミドルウェアには通らない。

カスタムプロキシの追加も簡単に行えます。内部実装では、Chrome Extensions API の chrome.proxy を利用しており、主な構成は以下の通りです：

Chrome Proxy設定のモード

proxy.ProxyConfigオブジェクト内で定義されるmode属性によって、全体的なプロキシ振る舞いが決定されます。

• direct：すべての接続が直接行われ、プロキシは使用しない。他のパラメータは不要。
• auto_detect：PACスクリプトによって自動的にプロキシ設定が決定される。
• pac_script：指定されたURLまたはdata内のスクリプト内容に基づき、プロキシ設定が適用される。他のパラメータは不可。
• fixed_servers：proxy.ProxyRulesに記述された固定サーバーを使用。詳細なルール構造は該当文書参照。
• system：OSのグローバル設定を反映。他の設定は無効。

プロキシ設定のコード例

fixed_servers モード

const proxyConfig = {
  mode: 'fixed_servers',
  rules: {
    singleProxy: {
      scheme: 'http',
      host: '127.0.0.1',
      port: 9999
    },
    bypassList: ['localhost', '127.0.0.1']
  }
};

await new Promise(resolve => {
  chrome.proxy.settings.set({
    value: proxyConfig,
    scope: 'regular'
  }, resolve);
});

pac_script モード

const config = {
  mode: 'pac_script',
  pacScript: {
    data: `function FindProxyForURL(url, host) {
      if (host === 'www.yaklang.com')
        return 'PROXY 127.0.0.1:2080';
      return 'DIRECT';
    }`
  }
};

await new Promise(resolve => {
  chrome.proxy.settings.set({
    value: config,
    scope: 'regular'
  }, resolve);
});

プロジェクト構成

db/                 # IndexedDB操作用
public/
  - background.js   # 拡張のバックグラウンドスクリプト
  - content.js      # ページ内挿入用のコンテンツスクリプト
  - proxy/          # プロキシ関連ロジック
manifest.json       # 拡張定義ファイル
src/
  - components/     # Reactコンポーネント
  - pages/          # ページビュー
  - types/          # TypeScript型定義
  - network/        # ネットワーク通信処理

manifest.jsonでは、proxy権限を明示的に宣言する必要があります：

{
  "manifest_version": 3,
  "name": "Yakit Chrome Endpoint",
  "permissions": [
    "proxy"
  ],
  ...
}

現状のUIとユーザーインターフェースはまだ簡素であり、改善の余地があります。しかし、Proxy SwitchyOmegaが広く支持されている理由が理解できます。その切り替え機能の直感性と使いやすさは、今後の参考となるべき点です。