TL;DRクローラーChrome拡張機能ビルダー

「TL;DR Crawler」というChrome拡張機能（Manifest V3）を、通常のウェブページ上で動作するように作成します。 機能概要 ツールバーのアイコンをクリックすると、現在のページに線画のスパイダーが表示され、カーソルに追従（スクロール中も）しながら、その上を通過するテキストを読み取り、浮遊パネルに簡潔なTL;DRを表示します。再度アイコンをクリックすると、すべてが消えてページは元の状態に戻ります。 1. トグル - background.js: chrome.action.onClicked が chrome.scripting.executeScript で content.js を注入します。 - content.js はグローバルフラグを確認します。クローラーが既に実行中ならシャットダウンしてクリーンアップします。そうでなければ起動します。タブごとに常に1つのインスタンスのみです。 2. テキストの検出 - 主要な可読領域を見つけます：<article> または <main> を優先し、それ以外では最も段落テキストが多い要素を選びます。nav、header、footer、aside、メニュー、フォーム、コード、広告、非表示要素はスキップします。 - テキストブロック（p、li、blockquote、h2-h4）を収集し、文に分割します。各文をDOM Rangeとして保存します（文はリンクや太字をまたぐことがあるため、要素でラップしないでください）。 - 領域をデバウンス付きMutationObserver（1秒）で監視し、後から読み込まれるテキスト（無限スクロール、遅延コンテンツ）を拾います。 3. キーセンテンスの選択 - 各文をスコアリング：数字+2、%、$、€、million、billion で+2；first、record、launch、announce、new、only、biggest、fastest、warns、raises、cuts などの単語で+1.5；大文字の固有名詞ごとに+0.3（最大+2）；40文字未満または260文字超で-2。 - 上位25%をキーセンテンスとしてマーク（最小5、最大80）、ほとんどの段落に1つずつ分散させます。 - 要約は各最大9語： - APIキーが設定されている場合：すべてのキーセンテンスを1回のリクエストでClaudeに送信し、短く簡潔な要約のJSON配列を要求（最大9語、数字と名前は正確に保持、誇張なし）。新しいテキストが表示されたらバッチで再度リクエストします。 - キーがない場合：フォールバック要約は、フィラー的な冒頭（and、but、however、also、according to）を削除した文を、単語境界で「…」で切り取ったものです。 4. スパイダー - ドキュメントルートにShadow DOMホストを配置し、全画面固定の<canvas>（pointer-events: none、z-index 2147483646）とパネルを含めます。 - 外観：小さな角丸長方形のボディ、楕円の腹部、2つの白い目を持つ頭部、輪郭は#5ab8ff。8本の脚は3pxの青い線で、ピンク（#ff4f7a）の関節ドット付き、各脚は2セグメントで逆運動学を使用し、膝は外側に曲がります。 - 歩行：2つの交互の脚グループ。足は、理想的な位置から約80px離れたとき、かつ他のグループが接地しているときにのみステップします。ステップは0.13秒で、小さなリフトを伴い、歩行方向にわずかに前方に着地します。 - 移動：ターゲット = カーソル位置 + スクロール、つまりスクロール中も追従します。最大約420px/秒、滑らかな加速、カーソルから約40pxで停止し、その方向に滑らかに向きます。カーソルが8秒間アイドル状態の場合、ビューポート内をさまよいます。 - requestAnimationFrame で固定1/120秒の物理ステップ。devicePixelRatio とウィンドウリサイズに対応します。 5. クロール - 80msごと、および各足の着地時に、document.caretRangeFromPoint でスパイダー下のテキストを検出します（拡張機能自身の要素は無視）。 - そのポイントが未発見のキーセンテンス内にある場合：CSS Custom Highlight API（::highlight(tldr-found) で柔らかい黄色の背景）でハイライトし、その要約をパネルに追加します。 - 足が通常の単語に着地した場合：約25%の確率でその単語だけをグリッチします。その単語だけをspanでラップし（単一のテキストノードなので安全）、ランダムな効果を1つ適用します：等幅フォント、青い輪郭、青いハイライト、わずかな回転、広い文字間隔、ぼかし、または大文字。単語ごとに最大2つの効果。すべての変更を記録して元に戻せるようにします。 6. パネル - 右上、ヘッダーでドラッグ可能、サイトのCSSの影響を受けないようにShadow DOM内に配置。 - ダーク（#16181c）、モノタイトル「TL;DR」は黄色（#ffd166）、「発見数 / 合計」カウンター、ピンクのプログレスバー、記事順の番号付きリスト。最新アイテムは黄色くフラッシュし、リストは自動スクロールします。リストは最大高さ内でスクロールします。 - ボタン：「TL;DRをコピー」（プレーンテキストをクリップボードへ）、「再起動」（ハイライト、グリッチ、リストをクリア）、「閉じる」（完全シャットダウン）。 - キーが設定されている場合：「ClaudeでTL;DRを書く」を追加：見つかったすべての文を送信し、事実と数字のみを使って3行の短い要約を返します。「考え中...」状態を表示し、その後にリストの下に回答を表示します。 7. APIキー - options.html: ユーザーのAnthropic APIキーとモデル名のフィールド、chrome.storage.local に保存。 - すべてのAPI呼び出しは background.js 経由で fetch を使用して https://api.anthropic.com に送信し、ヘッダーは x-api-key、anthropic-version: 2023-06-01、content-type: application/json。 - エラーは静かに処理：呼び出しが失敗した場合、フォールバック要約を維持し、「AI利用不可」の小さなメモを表示します。 8. 品質ルール - サイトのスクロール、クリック、リンク、テキスト選択を決して壊さない。 - シャットダウン時の完全なクリーンアップ：キャンバス、パネル、ハイライト、ラップされた単語のspan、インラインスタイル、リスナー、オブザーバー、タイマー。 - prefers-reduced-motion: グリッチなし、歩行速度を遅く。 - プレーンなJavaScript、ライブラリなし。ファイル：manifest.json、background.js、content.js、options.html、options.js、アイコン（16、48、128）。 - 権限：activeTab、scripting、storage。ホスト権限：https://api.anthropic.com/*。 最後にインストール手順：chrome://extensions を開き、デベロッパーモードを有効にし、「パッケージ化されていない拡張機能を読み込む」をクリックしてフォルダーを選択し、オプションを開いてAPIキーを貼り付けます。