MSTB (Multi-Session Tile Browser) - Crane

MSTB (Crane) は、ElectronとReactを使用して構築された、タイル型レイアウトのマルチセッションブラウザです。

最大の特徴は、各タイル（ウェブビュー）が独立したセッションを持っていることです。これにより、異なるアカウントでの同時ログインや、クッキー・ローカルストレージの分離が必要な作業を単一のウィンドウで効率的に行えます。

主な機能

• タイル表示: 複数のウェブサイトをグリッド状に同時に表示・操作できます。
• セッション分離: 各ビューは ViewManager と SessionManager によって管理され、完全に独立したメモリ上のセッション（パーティション）で動作します。クッキーやストレージは共有されません。
• セキュリティ: 強固なコンテンツセキュリティポリシー (CSP) とコンテキスト分離 (Context Isolation) を採用しています。
• ナビゲーション: 各タイルで「戻る」「リロード」「フォーカス」などの操作が可能です。

技術スタック

• Core: Electron (v34)
• UI Library: React (v19)
• Build Tool: Vite
• Language: TypeScript
• Styling: Tailwind CSS
• Testing: Playwright

開発環境のセットアップ

前提条件

• Node.js (LTSバージョンの利用を推奨)
• npm

インストール

プロジェクトの依存関係をインストールします。

npm install

開発サーバーの起動

開発モードでアプリを起動します。RendererプロセスとMainプロセスが同時に監視モードで起動します。

npm run dev

ビルド

プロダクション用のビルドを行います。dist/ ディレクトリにファイルが出力されます。

npm run build

テスト

Playwrightを使用したE2Eテストが設定されています。

npx playwright test

アーキテクチャ概要

• Main Process: アプリケーションのライフサイクル、BrowserView の作成・管理、およびセッションの分離を担当します。
  • SessionManager: セッションの作成と破棄を管理します。
  • ViewManager: BrowserView の配置とIPC通信を制御します。
• Renderer Process: ユーザーインターフェース（React）を描画します。各タイルの配置情報をIPC経由でMainプロセスに送信し、それに基づいて BrowserView がオーバーレイ表示されます。