Chrome 拡張機能ガイド

拡張機能の概要

CloneWebsite Chrome 拡張機能は、ウェブページの状態をキャプチャするためのコアツールです。従来のウェブクローラーとは異なり、ブラウザのコンテキスト内で動作するため、次のことができます：

1. CORS 制限の回避：クロスオリジンのリソース（サードパーティがホストする画像やフォントなど）に直接アクセスしてダウンロードできます。
2. 実際のレンダリング状態のキャプチャ：JavaScript の動的計算後の最終的な DOM と CSS を取得できます。
3. 認証済みコンテンツへのアクセス：ログインが必要なページ（ダッシュボード、管理システムなど）をクローンできます。

インターフェースと機能

ブラウザの右上にある拡張機能アイコンをクリックして、メインコントロールパネルを開きます。

フローティングツールバーには2つの出力先があります：ウェブサイトは既存の HTML/ZIP ワークフローを維持し、Figma は CloneWebsite Figma プラグイン用のローカル .cdesign アーカイブを作成します。完全なワークフローと権限モデルについては、ウェブページを Figma に書き出す を参照してください。

クローン設定

クローンを開始する前に、以下のオプションを設定できます：

• ディープクローンモード：iframe コンテンツやより深い動的リソースのキャプチャを試みます（処理時間が増加する場合があります）。
• 画像処理：
  • ファイルとして抽出（推奨）：すべての画像を独立した .png/.jpg ファイルとして抽出し、assets フォルダーに保存します。
  • Base64 を保持：画像を HTML 内のインラインデータとして保持します（HTML ファイルサイズが巨大になります）。
• プライバシーフィルタリング：
  • トラッキングスクリプトを削除：Google Analytics、Facebook Pixel などの既知のトラッキングコードを自動的に削除します。
  • すべての JS を削除：完全に静的で非インタラクティブなページのコピーを生成します（最も安全）。
• 外部リンクの自動修正：絶対パスを相対パスに変換し、スムーズなオフラインブラウジング体験を保証します。

詳細なクローンプロセス

1. 準備フェーズ

1. ページをスクロールし、すべてのレイジーロードされた画像やコンテンツが完全に読み込まれていることを確認します。
2. キャプチャしたいドロップダウンメニュー、アコーディオンコンポーネント、モーダルを展開します。
3. すべてのスケルトンスクリーンが実際のコンテンツに置き換えられるまで待ちます。

2. 実行フェーズ

クローン開始 をクリックすると、拡張機能は次のステップを実行します：

1. DOM のフリーズ：すべての CSS アニメーションとタイマーによってトリガーされる DOM 変更を一時停止し、キャプチャ中にページが変化するのを防ぎます。
2. リソースの抽出：DOM ツリーを走査して、参照されているすべての画像、フォント、外部スタイルシートを見つけます。
3. スタイルの計算：すべての要素の最終的な計算スタイルを取得し、環境間の視覚的一貫性を保証します。
4. 冗長性のクリーンアップ：非表示の要素、空のプレースホルダー、既知の不要なスクリプトタグを削除します。
5. パッケージ化とダウンロード：JSZip を使用してメモリ内にファイル構造を構築し、ブラウザのダウンロードアクションをトリガーします。

3. 大きなページの処理

非常に大きく複雑なページ（長いリストや無限スクロールのダッシュボードなど）をクローンする際に問題が発生した場合：

• チャンクでクローンしてみてください：最も関心のある部分だけを展開します。
• ブラウザのメモリを解放するために、他の無関係なタブを閉じます。
• ブラウザが「ページが応答しません」と表示した場合は、「待機」を選択します。複雑なシリアライゼーションプロセスには時間がかかる場合があります。

ショートカットと一般的な操作

• Alt + Shift + C（Mac: Option + Shift + C）：デフォルト設定を使用して現在のページをワンクリックでクローンします。
• コンテキストメニュー：ページの空き領域を右クリックし、CloneWebsite -> Clone this page を選択します。

一般的なエラーと解決策

Q: ダウンロードしたページのレイアウトが乱れているのはなぜですか？
A: これは通常、ページが複雑な CSS 変数を使用しているか、サイズを動的に計算するために特定の JavaScript ロジックに依存しているためです。設定で「クリティカルスタイルの強制インライン」オプションを有効にしてみてください。

Q: アイコンが表示されないのはなぜですか？
A: 一部のフォントアイコン（FontAwesome など）にはホットリンク保護がある場合があります。拡張機能はそれらを取得しようとしますが、サーバーが強制的に拒否した場合、アイコンは四角形として表示されます。フォントのクロスオリジン戦略を継続的に最適化しています。

Q: クローンをクリックしても何も起こりません？
A: Chrome デベロッパーツール（F12）を開き、Console パネルに切り替えてエラーを確認してください。一部の非常に厳格なコンテンツセキュリティポリシー（CSP）が、拡張機能スクリプトの実行をブロックしている可能性があります。