Side by Side Browser

Web サイトを移行・リニューアルするとき、旧ページと新ページを常に見比べる必要がある。ブラウザを2つ並べて手でスクロールを合わせるのは遅く、ズレやすい。かといって <iframe> で並べる方式は、X-Frame-Options や CSP に阻まれて多くの実サイトで動かない。

Side by Side Browser は、2つの Web ページを左右のネイティブ Webview に読み込み、スクロールと URL パスを同期させて比較できる Electron 製のデスクトップアプリ。

主な機能

• ネイティブ Webview 2画面 — iframe ではなく本物の Chromium で描画するため、ほぼ任意のページを読み込める
• スクロール同期 — 片方を動かすともう片方が追従。単位を px(絶対ピクセルを 1:1 で適用)と percent(スクロール率で対応付け)から選べる
• URL パス同期 — pathname / search / hash をコピーしつつ各ペインの origin は保持。old.example.com/products/42 と new.example.com/products/42 が揃う
• 外部ドメインロック — ホスト名が変わる遷移を(リダイレクトも含め)ブロックし、比較対象の 2 サイトに固定
• リンクを新規タブで開く — クリックしたリンクを、両ペインをパス同期させた新しいタブで開く
• タブ — 複数の比較ペアを 1 ウィンドウで扱え、あふれたら複数行に折り返す。キーボード操作対応
• 設定の永続化 — 同期トグルとスクロール単位を保存し、次回起動時に復元

セキュリティ

信頼できない本番・ステージングページを読み込む前提で、context isolation 有効・node integration 無効・sandbox 有効・権限はデフォルト拒否を徹底している。

技術スタック: Electron / Chromium WebContentsView / Tailwind CSS v4。macOS (arm64) 向けの配布ビルドに対応。MIT ライセンス。