Window Resizer

ブラウザウィンドウを指定した寸法にリサイズし、リアルタイムでサイズを監視する開発者向けChrome拡張機能です。

🚀 機能

• 2つのサイズ表示: ウィンドウサイズ（ブラウザの外枠込み）とビューポートサイズ（コンテンツ領域）の両方を表示
• サイドパネルインターフェース: 作業中も開いたままの永続的なパネル
• リアルタイム監視: ウィンドウのリサイズや移動に合わせて自動的にサイズを更新
• スマート自動補正: ウィンドウ操作時に発生する1-2pxのズレを自動修正
• 豊富なプリセット: デスクトップ、タブレット、モバイル向けの一般的な画面サイズに素早くアクセス
• カスタムサイズ: 任意の幅と高さの値を入力可能
• 履歴追跡: 最近使用した5つのサイズを記憶
• クリップボードにコピー: サイズ値をワンクリックでコピー
• キーボードショートカット: ホットキーによる素早いアクセス
• 視覚的な図解: 各サイズ測定が何を表しているかを明確に図示

📊 サイズの違いについて

• ウィンドウサイズ 🔵: タイトルバー、タブ、アドレスバー、スクロールバーを含むブラウザウィンドウ全体
• ビューポートサイズ 🟢: Webページが実際に表示されるコンテンツ領域（スクロールバーを除く）

この拡張機能は、ウィンドウサイズを変更することで希望するレイアウトテストを実現します。

🛠 インストール方法

ソースから（開発者モード）

1. Chromeを開き、chrome://extensions/ にアクセス
2. 右上の「デベロッパーモード」を有効にする
3. 「パッケージ化されていない拡張機能を読み込む」をクリックし、このフォルダを選択
4. ツールバーにWindow Resizerアイコンが表示されます

Chrome ウェブストアから

近日公開予定 - Chrome ウェブストアに公開予定です

📖 使い方

基本的な使い方

1. ツールバーのWindow Resizerアイコンをクリック
2. サイドパネルが開き、現在のウィンドウとビューポートサイズが表示されます
3. プリセットサイズから選択するか、カスタム寸法を入力
4. ブラウザをリサイズすると、サイズが自動的に更新されます

キーボードショートカット

• Ctrl+Shift+R (Mac: Cmd+Shift+R) - サイドパネルの表示/非表示
• Ctrl+Shift+1 - 1920×1080（フルHD）にリサイズ
• Ctrl+Shift+2 - 1280×720（HD）にリサイズ

これらのショートカットは chrome://extensions/shortcuts でカスタマイズできます

プリセットサイズ

デスクトップ

• 1920×1080（フルHD）
• 1366×768（一般的なノートPC）
• 1440×900（MacBook Air）
• 1280×720（HD）

タブレット

• 768×1024（iPad縦向き）
• 1024×768（iPad横向き）

モバイル

• 375×667（iPhone 6/7/8）
• 414×896（iPhone XR/11）
• 360×640（Android）

🎯 こんな方におすすめ

• Web開発者: レスポンシブデザインのテスト
• QAエンジニア: 特定の解像度でのクロスブラウザテスト
• デザイナー: 異なる画面サイズでのレイアウト確認
• コンテンツクリエイター: 正確な寸法でのスクリーンショット撮影

🔧 技術詳細

ブラウザ対応

• Chrome 114+（Side Panel API が必要）
• Microsoft Edge 114+
• Side Panel をサポートするその他のChromiumベースブラウザ

使用する権限

• sidePanel - 永続的なサイドパネルインターフェース用
• tabs - ビューポートサイズのための現在のタブ情報取得用
• storage - サイズ履歴の保存用
• scripting - ビューポート寸法の測定用
• <all_urls> - ビューポート測定のためのスクリプト注入用

アーキテクチャ

• Manifest V3 - 最新の拡張機能プラットフォームを使用
• Side Panel API - 永続的で邪魔にならないインターフェースを提供
• Service Worker - バックグラウンド操作とショートカットを処理
• Content Script Injection - ビューポートサイズを正確に測定

🚧 既知の制限事項

• chrome:// URLなどの特別なページではビューポートサイズを測定できません
• OSのウィンドウ管理により1-2pxのズレが発生する場合があります（自動補正されます）
• ブラウザ/OSによる最小ウィンドウサイズが適用されます
• 画面寸法より大きなサイズにはリサイズできません

🤝 貢献

貢献を歓迎します！プルリクエストをお気軽に送信してください。

開発環境のセットアップ

1. このリポジトリをクローン
2. 変更を加える
3. Chrome開発者モードでテスト
4. プルリクエストを送信

📄 ライセンス

MIT License - 詳細はLICENSEファイルをご覧ください

📝 更新履歴

v1.0.0

• 初回リリース
• サイドパネルインターフェース
• リアルタイムサイズ監視
• プリセットとカスタムサイズ
• 履歴追跡
• キーボードショートカット
• ウィンドウズレの自動補正

---

Web開発コミュニティのために ❤️ を込めて作成