Dev Tracker

最終ビルド: 2026/8/24 12:31
← 一覧に戻る

fullpage-clipper-to-ai

GitHub ↗ JavaScript 最終push: 2026/7/4 19:51

WIP（現在進行中）

Work In Progress

このプロジェクトで現在進行中の作業と、過去のスナップショットを記録する。

現在の状況

進捗（2026-07-04 19:49 時点）: v0.1 + v0.2 実装完了。実地確認済みの範囲が拡大:

  • 通常ページ（Cloudflare ダッシュボード）: GoFullPage と同等品質
  • claude.ai チャットページ: inner scroller モードで会話ログ全体をクロップ合成
  • chatgpt.com チャットページ: 最下部スタートで検出が失敗するバグを修正して動作確認済み（クリップボード保存も確認。「保存されない」報告が1回あったが再現せず、勘違いの可能性大）
  • クリップボード書き込みは失敗理由が通知に出る診断モードになっている（再発時はその文言で原因特定できる）

次にやること:

  1. 受け入れ基準の残り総当たり: Claude/ChatGPT への実ペースト確認（マイルストーン②マトリクス）、http ページ、chrome://、file://、無限スクロール長尺ページ、撮影中のタブ切替
  2. 通れば仕上げ（通知文言・README 最終化）→ ストア公開検討

未決事項:

  • Promise 版 ClipboardItem の解決待ちタイムアウト（長時間撮影時）が実在するかは未確認。間欠失敗が再発したら通知の実エラーで判定
  • http ページの execCommand フォールバックから AI 側が画像を拾えるかは未実測

過去のWIPアーカイブ

（新しい「現在の状況」を書く前に、古いものをここに追記でアーカイブする。新しいものが上）

2026-07-04 19:38 時点のスナップショット

進捗: v0.1（スクロール合成 + クリップボード）+ v0.2（inner scroller 対応）の実装完了。実地確認済み:

  • 通常ページ（Cloudflare ダッシュボード）: GoFullPage と同等品質を確認（継ぎ目・先頭欠けの問題は解消済み）
  • claude.ai チャットページ: inner scroller モードで会話ログ全体をクロップ合成できることを確認（入力欄の写り込みも解消済み）
  • HUD（ミニページ・スキャナー）は点滅なしの常時表示、ESC キャンセル動作も実装済み

次にやること: 受け入れ基準の残り総当たり（Claude/ChatGPT 実ペースト最重要）→ 仕上げ → ストア公開検討

未決事項: http ページの execCommand フォールバック実効性、refocus リトライの実測

ROADMAP（計画）

ロードマップ

今週

  • v0.1 実装（スクロール合成 + クリップボード + 通知 + アイコン）
  • v0.2 実装（inner scroller 対応 = claude.ai / chatgpt.com のチャット画面）
  • HUD（点滅なし・ミニページ・スキャナー）+ バッジ進捗 + ESC キャンセル
  • 受け入れ基準の総当たりテスト
    • chatgpt.com での撮影 + クリップボード保存確認（最下部スタート検出バグ修正済み）
    • Claude / ChatGPT への実ペースト確認（マイルストーン②マトリクス、最重要）
    • http ページ（execCommand フォールバック）
    • chrome:// / file:// / Chrome Web Store ページ（特権ページ通知）
    • 無限スクロール系の長尺ページ（25枚打ち切り + 通知）
    • 撮影中のタブ/ウィンドウ切替（refocus リトライ）

今月

  • 通知文言・README の最終化
  • Chrome Web Store 公開の検討（ストア掲載素材・スクリーンショット）

今四半期

（今四半期の目標）

いつか

  • CDP 2nd モード（chrome.debugger + captureBeyondViewport。静的な長いドキュメント向け高速キャプチャ）
  • タブタイトルへの進捗表示（HUD が合わないページ向けの代替）
  • inner scroller 検出のヒューリスティック強化（横スクロール領域、ネストされたスクローラー）

DECISIONS（意思決定）

意思決定記録

このプロジェクトで下した重要な意思決定を記録する。 最新が上に来る。

2026-07-04: クリップボード書き込みは「正直な通知」方針（execCommand 成功は互換モード扱い）

背景: chatgpt.com テスト時に「成功通知が出たのにクリップボードに無い」という報告があった（結果的に勘違いの可能性大）。execCommand フォールバックは HTML コピーになるため、true を返しても画像として貼れない場合があり、これを無条件に成功扱いすると原因調査ができない。

決定: 書き込み各段階（予約 write / 素の write / execCommand）の失敗理由をすべて収集し、失敗通知に実エラーメッセージを表示する。execCommand での成功は「互換モード: 画像として貼れない場合があります」と通知で明示する。

理由: 間欠的なクリップボード失敗（focus 喪失、Permissions-Policy、Promise 解決タイムアウト等）は再現が難しく、ユーザーが通知文言を報告するだけで原因特定できる状態にしておくのが最も安い調査手段。

背景: ページ内進捗 HUD は撮影の瞬間に隠すと点滅して見え、体験が悪い（GoFullPage は点滅しない）。

決定: スクロール歩幅を viewportH - 88px に縮めて各タイル上端に重複帯を作り、stitch で必ず捨てられるその帯（画面右上）に HUD を常時表示する。tile 0 のみ帯を捨てないため、最初の撮影完了後に HUD を出す。

理由: 隠す方式は非表示時間を最小化しても点滅が構造的に残る。帯方式はタイル数が1割弱増えるだけで点滅が完全に消える。GoFullPage と同じアプローチ。

2026-07-04: inner scroller 対応（v0.2）を前倒しで実装、方式はクロップ合成

背景: claude.ai のチャットページが 100vh アプリシェル（会話は内側の div がスクロール）で、v0.1 の document 駆動では撮れなかった。「AI に貼る」ツールとしてチャット画面は主要ユースケース。

決定: v0.2 として実装。document にスクロール余地がない場合のみスクローラー検出（面積最大 + 実スクロール検証）を発動し、要素を駆動して各タイルからスクローラー矩形をクロップして合成する。完成画像は会話ログのみ（サイドバー等は含まない）。inner モードでは PREPARE（fixed/sticky 退避）を tile 0 の前に行う（入力欄オーバーレイの写り込み防止。document モードは従来どおり tile 0 後 = ヘッダーを1回写す）。

理由: クロップ方式なら既存の stitch・防御ロジック（到達確認リトライ / SCROLL_MOVED 撮り直し）がそのまま使え、document モードは矩形原点 (0,0) として同一コードパスに畳める。

2026-07-04: HUD デザインはオリジナルの「ミニページ・スキャナー」

背景: 進捗バーに遊び心が欲しい。最初にパックマン風を実装したが、GoFullPage の丸パクリになるため撤回。

決定: ミニチュアのページ枠の中をスキャンラインが明滅しながら下り、通過した部分に本文の行が「現像」されて浮かぶデザインにする。

理由: この拡張の実際の動作（ページを上から下へスキャンして1枚に合成）の縮図で、オリジナリティと進捗の直感性を両立できる。

2026-07-04: アイコンは B案、進捗表示は HUD + バッジ併用

背景: 初版アイコン（青タイル + ページ + 折り返し）がダサい、待ち時間が退屈という2つのフィードバック。

決定: アイコンは3案から B案（ダーク角丸 + 白ダブルシェブロン）。進捗表示はページ内 HUD とツールバーバッジ（% → ✓/!/×）の併用。

理由: B案が最もミニマルで16pxでも視認できる。バッジはブラウザ UI なので写り込みリスクゼロ、HUD は視線移動なしで進捗が見える。両者は補完関係。

DEVLOG（作業ログ）

開発日誌

このプロジェクトでの作業を時系列で記録する。 最新のエントリが上に来る。

2026-07-04

19:49 - chatgpt.com 対応 + クリップボード書き込みの診断強化

やったこと:

  • chatgpt.com で inner scroller 検出が失敗する問題を修正:
    • 原因: チャットページは最下部で開かれるため、「下に 1px 動かす」スクロール可否検証が常に失敗していた（claude.ai は撮影時にたまたま途中位置だったので成功していた）
    • 修正: 検証を双方向に（下がダメなら上に 1px）
  • column-reverse スクローラー対応（保険）: scrollTop の下限を MEASURE 時に実測（scrollTop = -1e9 のクランプ値）し、以降を「論理 y（0 = 最上部）」に統一変換。通常スクローラーでは下限 0 で挙動不変
  • クリップボード書き込みの診断強化:
    • 「保存されてない」報告（結果的に勘違いの可能性大）を受け、書き込み経路を整理: 予約 write → focus 確認 + refocus → 素の write ×2回 → execCommand の直列チェーンに
    • 各段階の失敗理由を収集して background に返し、失敗通知に実際のエラーメッセージを表示
    • execCommand フォールバック成功は「互換モード: 画像として貼れない場合があります」と明記（HTML コピーになるため、成功扱いだが区別する）
    • FINALIZE 結果を Service Worker コンソールにログ出力

気づき:

  • Promise 版 ClipboardItem の解決待ちタイムアウト（長時間撮影時）は未実測のまま。間欠的な書き込み失敗が再発したら通知の文言（= 実エラー）で特定できる状態にした

次回やること:

  • 受け入れ総当たりの続き（Claude/ChatGPT 実ペースト、http、chrome://、長尺 25 枚打ち切り）

19:38 - v0.1〜v0.2 実装（docs/DESIGN.md → 動く拡張へ）

やったこと:

  • docs/DESIGN.md を元に拡張一式を実装: manifest.json / src/protocol.js（定数の単一ソース）/ src/background.js（オーケストレーター）/ src/content.js（clipboard予約・stitch・復元）/ icons/
  • アイコン: 3案生成（Python 自作 PNG エンコーダ、依存なし）→ B案（ダーク + 白ダブルシェブロン）採用
  • 進捗表示: ツールバーバッジ（%表示 → 完了✓/失敗!/キャンセル×）+ ページ内 HUD
  • 実地デバッグ（Cloudflare ダッシュボードの Settings ページで GoFullPage と比較）:
    • 継ぎ目の黒線 = dy/dh を別々に丸めた 1px 隙間 → 境界式統一 + 下端 1px オーバーラップ描画で解消
    • 先頭欠け（白帯）・行潰れ = SPA のスクロール位置復元が撮影と競合 → behavior:"instant" 徹底 + 到達確認リトライ（最大3回）+ TILE 時のズレ検出（SCROLL_MOVED → 1回撮り直し）+ overflow-anchor:none / scroll-behavior:auto の先行スタイル注入で解消
  • v0.2 inner scroller 対応（claude.ai / chatgpt.com 等の 100vh アプリシェル）:
    • document にスクロール余地がない場合のみ発動する検出（候補を面積で選び、実際に 1px 動かして検証）
    • scrollAreaTo/Y/MaxY ヘルパーで window / 要素を透過的に駆動、タイルからスクローラー矩形をクロップして合成
    • 入力欄（コンポーザー）の写り込み → inner モードでは PREPARE（fixed/sticky 退避）を tile 0 の前に実施して解消
  • HUD の点滅解消: スクロール歩幅を viewportH - 88px に縮め、各タイル上端の重複帯（stitch で捨てる領域）に HUD を常時表示する方式へ変更。隠す必要がなくなり点滅ゼロ
  • HUD デザインを「ミニページ・スキャナー」に: スキャンラインが明滅しながら下り、通過部分に本文の行が現像されて浮かぶ（パックマン風は丸パクリのため撤回）
  • ESC キャンセル: content で ESC 捕捉 → background がループ打ち切り → 復元 + クリップボード既存内容保持 + グレー×バッジ

決めたこと: DECISIONS.md に4件記録

次回やること:

  • 受け入れ基準の残り総当たりテスト: Claude/ChatGPT への実ペースト（マイルストーン②マトリクス）、http ページ、chrome://、無限スクロール長尺ページ
  • 通ったら Chrome Web Store 公開の検討

最近のコミット

README

fullpage-clipper-to-ai（Fullpage Clipper to AI）

ワンクリック / ショートカットで、開いているページ全体をスクロール合成キャプチャし、 PNG をクリップボードへ直接コピーする Chrome 拡張（Manifest V3）。 ポップアップ・ダウンロード・エディタタブは一切出さず、そのまま Claude / ChatGPT に Cmd+V で貼れる。

特徴

  • ページ全体をスクロールしながら撮影して合成（lazy-load / 無限スクロールも拾う）
  • 出力は PNG。クリック直後に clipboard.write を予約するため transient activation 切れに強い
  • sticky / fixed ヘッダーは先頭で1回だけ写し、以降は退避して重複を防ぐ
  • 撮影後はスクロール位置・fixed 要素を元通りに復元
  • 特権ページ（chrome:// 等）では静かに「使えません」通知（クラッシュしない）

セットアップ（開発版の読み込み）

  1. chrome://extensions を開く
  2. 右上の「デベロッパーモード」を ON
  3. 「パッケージ化されていない拡張機能を読み込む」→ このフォルダを選択
  4. （任意）chrome://extensions/shortcuts でショートカットを確認 / 変更（既定 Alt+Shift+C）

使い方

  • ツールバーの拡張アイコンをクリック、または Alt+Shift+C
  • 数秒後、「ページ全体をコピーしました」の通知が出たら、AI の入力欄で Cmd+V

ファイル構成

manifest.json
src/protocol.js     # メッセージ型定数・エラーコード・調整パラメータ（単一ソース）
src/background.js   # オーケストレーター（特権判定/注入/スクロール駆動/レート制御/通知）
src/content.js      # clipboard 予約 / 採寸 / 退避 / タイル decode & stitch / 復元 / watchdog
icons/              # 16/32/48/128

設計の詳細は docs/DESIGN.md を参照。

既知の制約（v0.1）

  • 内部スクロール構造のページ（document 以外がスクロール）は検出して非対応通知で失敗させる
  • 長すぎるページはタイル 25 枚（先頭 ~25 画面分）で打ち切り
  • canvas 上限を超える場合は等比縮小（通知に明記）
  • http ページ / clipboard をポリシーで塞ぐページは execCommand フォールバックを試行（AI 側が拾えるかは環境依存）