mcpField
F
full-page-screenshot

full-page-screenshot

github.com/lewisliu007生産性2688 回インストール3 週間前に更新
リポジトリ

full-page-screenshot について

Chromeでページ全体のPNGスクリーンショットを作成するNode.jsスキルです。Chrome DevToolsへ直接接続し、SPAのスクロール領域、遅延読み込み画像、長いページの分割撮影に対応します。

主な機能

  1. 01ページ全体のPNG撮影
  2. 02内部スクロール領域の検出と展開
  3. 03DOM安定と遅延読み込み画像の待機
  4. 04長いページの分割撮影と結合
  5. 05既存タブまたはURLから撮影

活用シーン

  1. 01画面外の内容を含むページの保存
  2. 02Chromeで開いた認証済みページの撮影
  3. 03長い記事や幅広い表の撮影

インストール

コマンドをコピーしてターミナルで実行します。

$npx skills add https://github.com/lewisliu007/full-page-screenshot --skill full-page-screenshot

インストール後、Claude Code で/full-page-screenshotを入力して読み込まれたか確認します。

同梱ファイルREADME.mdscripts/full-page-screenshot.mjs

詳細

ページ全体のスクリーンショット

ブラウザーで開いているウェブページの全内容（スクロールしないと表示されない部分を含む）を、縦長の PNG スクリーンショットとして生成します。Chrome DevTools WebSocket に直接接続するため、CDP Proxy やその他の中間レイヤーは不要です。

前提条件

Node.js 22+ と、リモートデバッグを有効にした Chrome があれば使用できます。

node "${CLAUDE_SKILL_DIR}/scripts/full-page-screenshot.mjs" --check

chrome の確認に失敗した場合は、chrome://inspect/#remote-debugging を開いて、"Allow remote debugging for this browser instance" にチェックを入れるようユーザーに案内してください。

ワークフロー

ユーザーが開いているタブを指定した場合（推奨。特にログインが必要なページ）

最初にすべてのタブを一覧表示し、ユーザーの説明に一致する targetId を見つけます。

node "${CLAUDE_SKILL_DIR}/scripts/full-page-screenshot.mjs" --list

次に、そのタブのスクリーンショットを撮影します。

node "${CLAUDE_SKILL_DIR}/scripts/full-page-screenshot.mjs" <targetId> <output> [--width N] [--dpr N]
ユーザーが URL を指定した場合

1 つのコマンドで全手順（タブを作成 → 読み込みを待機 → スクリーンショットを撮影 → タブを閉じる）を実行します。

node "${CLAUDE_SKILL_DIR}/scripts/full-page-screenshot.mjs" --url "<URL>" <output> [--width N] [--dpr N] [--wait N]

注意：--url モードではバックグラウンドタブが作成されます。SAP や企業 SSO など、ログインが必要な社内システムでは、バックグラウンドタブで認証を完了できないことがあります。その場合は、まず Chrome でページを開いてから、targetId モードでスクリーンショットを撮影するようユーザーに案内してください。

パラメーターの説明
パラメーター説明デフォルト値
output出力ファイルのパス/tmp/screenshot.png
--widthビューポートの幅（CSS ピクセル）。記事ページは 1200、幅の広いテーブルやパネルは 1440-19201200
--dprデバイスピクセル比。2 にすると Retina 相当の鮮明さになりますが、ファイルサイズは 4 倍になります1
--waitページ読み込みのタイムアウト（ミリ秒）。--url モードのみ15000
出力の確認
sips -g pixelWidth -g pixelHeight <output>

部分的な切り抜きの確認（Pillow が必要です）：

from PIL import Image
img = Image.open("<output>")
w, h = img.size
img.crop((0, 0, w, 1500)).save("/tmp/check_top.png")
img.crop((0, h-1500, w, h)).save("/tmp/check_bottom.png")

主な機能

  • SPA の内部スクロールコンテナー：overflow-y: auto/scroll のコンテナーを自動検出し、!important で CSS の高さ制約（Tailwind の h-[calc(...)] などを含む）を上書きして、すべての内容を展開してからスクリーンショットを撮影します。
  • DOM の安定待機：readyState=complete になった後も DOM 要素数の変化を監視し、SPA のデータ描画が完了するまで待機します。
  • 遅延読み込みへの対応：段階的にスクロールして IntersectionObserver をトリガーし、すべての img.complete を待ちます。
  • 非常に長いページの分割撮影：ページの高さが 16000px を超える場合、自動的に分割して撮影します（各画像は 8000px）。Python PIL で結合します。
  • Proxy との互換性：web-access CDP Proxy の実行中は自動検出し、proxy API を介してスクリーンショットを撮影します（スクロールコンテナーの分割画像を結合します）。

注意事項

  • 非常に長いページ（> 20000px）は、高い DPR では Chrome のメモリに問題が発生する可能性があります。その場合は --dpr を 1 に下げるか、--width を小さくしてください。
  • --url モードではバックグラウンドタブが自動的に作成され、スクリーンショットの撮影後に閉じられます。ユーザーがすでに開いているタブには影響しません。
  • スクリーンショットの撮影中は、ページのビューポートサイズとスクロールコンテナーのスタイルを一時的に変更します。完了後は自動的に元に戻ります。
  • スクリプトは DevToolsActivePort ファイルを読み取って Chrome のデバッグポートを検出し、WebSocket に直接接続します。プロキシや中間サービスは不要です。
  • 分割画像の結合には Python 3 と Pillow が必要です（macOS には通常インストールされています）。Pillow がない場合、分割画像ファイルはそのまま残ります。
  • web-access の CDP Proxy の実行中は、スクリプトは最初に直接接続を試み、タイムアウトした場合は proxy API（/eval および /screenshot エンドポイントを使用した操作）に切り替えます。

コメント

Markdown 対応