mcpField
C
canghe-url-to-markdown

canghe-url-to-markdown

github.com/freestyleflyドキュメント470506 回インストール20 週間前に更新
リポジトリ

canghe-url-to-markdown について

Chrome CDPでウェブページを取得し、レンダリング後のHTMLをMarkdownに変換するスキルです。自動取得とユーザー確認待ちのモードがあり、ログインや追加読み込みが必要なページにも対応します。

主な機能

  1. 01JavaScriptレンダリングページの取得
  2. 02自動取得とユーザー待機モード
  3. 03YAMLメタデータ付きMarkdown
  4. 04出力先とタイムアウトの設定

活用シーン

  1. 01公開ウェブページのMarkdown保存
  2. 02ログインが必要なページの取得
  3. 03遅延読み込み完了後の取得
  4. 04EXTEND.mdによる取得設定

インストール

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

$npx skills add https://github.com/freestylefly/canghe-skills --skill canghe-url-to-markdown

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

同梱ファイル

SKILL.md と一緒にインストールされる参考資料やスクリプト。

scripts/
cdp.ts
constants.ts
html-to-markdown.ts
main.ts
paths.ts

詳細

URL から Markdown へ

Chrome CDP 経由で任意の URL を取得し、HTML をクリーンな Markdown に変換します。

スクリプトディレクトリ

重要：すべてのスクリプトは、このスキルの scripts/ サブディレクトリにあります。

エージェントの実行手順：

  1. この SKILL.md ファイルのディレクトリパスを SKILL_DIR として特定します
  2. スクリプトのパス = ${SKILL_DIR}/scripts/<script-name>.ts
  3. このドキュメント内のすべての ${SKILL_DIR} を実際のパスに置き換えます

スクリプトの参照：

スクリプト用途
scripts/main.tsURL 取得用の CLI エントリーポイント

設定（EXTEND.md）

Bash を使って EXTEND.md の存在を確認します（優先順位順）：

# Check project-level first
test -f .canghe-skills/canghe-url-to-markdown/EXTEND.md && echo "project"

# Then user-level (cross-platform: $HOME works on macOS/Linux/WSL)
test -f "$HOME/.canghe-skills/canghe-url-to-markdown/EXTEND.md" && echo "user"

┌────────────────────────────────────────────────────────┬───────────────────┐ │ パス │ 場所 │ ├────────────────────────────────────────────────────────┼───────────────────┤ │ .canghe-skills/canghe-url-to-markdown/EXTEND.md │ プロジェクトディレクトリ │ ├────────────────────────────────────────────────────────┼───────────────────┤ │ $HOME/.canghe-skills/canghe-url-to-markdown/EXTEND.md │ ユーザーホーム │ └────────────────────────────────────────────────────────┴───────────────────┘

┌───────────┬───────────────────────────────────────────────────────────────────────────┐ │ 結果 │ アクション │ ├───────────┼───────────────────────────────────────────────────────────────────────────┤ │ 見つかった │ 読み込み、解析し、設定を適用します │ ├───────────┼───────────────────────────────────────────────────────────────────────────┤ │ 見つからない │ デフォルトを使用します │ └───────────┴───────────────────────────────────────────────────────────────────────────┘

EXTEND.md で設定できる項目：デフォルトの出力ディレクトリ | デフォルトのキャプチャモード | タイムアウト設定

機能

  • 完全な JavaScript のレンダリングに Chrome CDP を使用
  • 2 つのキャプチャモード：自動またはユーザー待機
  • メタデータ付きのクリーンな Markdown 出力
  • 待機モードでログインが必要なページに対応

使用方法

# Auto mode (default) - capture when page loads
npx -y bun ${SKILL_DIR}/scripts/main.ts <url>

# Wait mode - wait for user signal before capture
npx -y bun ${SKILL_DIR}/scripts/main.ts <url> --wait

# Save to specific file
npx -y bun ${SKILL_DIR}/scripts/main.ts <url> -o output.md

オプション

オプション説明
<url>取得する URL
-o <path>出力ファイルのパス（デフォルト：自動生成）
--waitキャプチャ前にユーザーの合図を待ちます
--timeout <ms>ページ読み込みのタイムアウト（デフォルト：30000）

キャプチャモード

モード動作使用する状況
自動（デフォルト）ネットワークがアイドル状態になったらキャプチャ公開ページ、静的コンテンツ
待機（--wait）準備完了時にユーザーが合図ログインが必要なページ、遅延読み込み、ペイウォール

待機モードのワークフロー：

  1. --wait を付けて実行 → スクリプトが「Press Enter when ready」と出力します
  2. ページの準備ができたことをユーザーに確認します
  3. 標準入力に改行を送信してキャプチャを開始します

出力形式

url、title、description、author、published、captured_at フィールドを含む YAML フロントマターに続いて、変換された Markdown コンテンツが出力されます。

出力ディレクトリ

url-to-markdown/<domain>/<slug>.md
  • <slug>：ページタイトルまたは URL パスから生成（ケバブケース、2～6 語）
  • 名前が競合する場合：タイムスタンプ <slug>-YYYYMMDD-HHMMSS.md を追加します

環境変数

変数説明
URL_CHROME_PATHChrome 実行ファイルのカスタムパス
URL_DATA_DIRカスタムデータディレクトリ
URL_CHROME_PROFILE_DIRカスタム Chrome プロファイルディレクトリ

トラブルシューティング：Chrome が見つからない場合 → URL_CHROME_PATH を設定します。タイムアウトする場合 → --timeout を増やします。複雑なページの場合 → --wait モードを試します。

拡張機能のサポート

EXTEND.md を使ってカスタム設定を行えます。パスと設定可能な項目については、設定セクションを参照してください。

コメント

Markdown 対応