Treck: Web調査をキャプチャしClaudeを使って文書を生成するChrome拡張機能

Treckは、「50個のタブを開いて手動でまとめる」問題を解決するChrome拡張機能です。テキスト、画像、商品ページ、YouTube動画、Webページ全体を、名前付きのプロジェクトスレッドにクリップします。Claudeがすべてのクリップを同時に処理し、PDFレポート、.docx、共有可能な比較ページなどを生成します。

仕組み

• 何でもクリップ: 任意のタブから、テキスト、画像、商品ページ、YouTube動画、完全なHTMLをキャプチャ。
• スレッドに整理: 名前付きの各スレッドがプロジェクト。すべてのクリップが1か所に集約。
• ドキュメント生成: フォーマット固有のシステムプロンプト（レポート、提案、要約、メール、概要）を用いて、Claudeがクリップをシリアル化し、Markdownを返し、スタイル付きPDFと.docxに変換。
• 比較ページ生成: 同じ入力から、比較表、メリット/デメリット、推奨事項を含む構造化HTMLページを出力。画像や動画のクリップはギャラリーと埋め込みに。
• 自分のキーを持ち込む: ユーザー自身のAnthropicキーで動作（フォールバックとしてDeepSeek）。トークンマークアップは不要。

主要な技術的教訓: クリップのシリアル化

開発者が最も有用と発見した点: クリップをコンテキストにどうシリアル化するかが、プロンプトの文言よりも重要。 生のキャプチャHTMLをそのまま渡すと、曖昧で曖昧な出力になりました。各クリップをラベル付きブロック（source, title, captured text, note, type）にあらかじめ構造化し、クリップ内の情報のみを使用するよう明示的に指示することで、プロンプトの調整以上の品質向上が得られました。

比較ページ用のプロンプト:

あなたは以下のクリップ内の製品とソースを比較しています。短い導入文、主な違いのMarkdown表、各オプションの明確なメリットとデメリット、単一の明確な推奨事項とその理由を含む構造化比較を作成してください。クリップ内の情報のみを使用してください。Markdownのみを出力してください。

スタック

サイドパネルにReact/TypeScriptとZustand、バックエンドにExpressとSupabase。キャプチャと基本整理機能は無料、Claudeを利用した生成機能が有料ティアです。

ライブ例

• 生成された比較ページ（ログイン不要）
• 単一の共有クリップ（ログイン不要）

プロンプト設計やクリップコンテキスト構造の詳細については、開発者がRedditスレッドで活動しています。