Claude Chat Exporter 完整教學

1. 專案定位

Claude Chat Exporter 是一個純 JavaScript 瀏覽器腳本，用於將 Claude.ai 網頁版的對話匯出 (export) 為格式完整的 Markdown 檔案。

核心價值：不同於傳統的 HTML 解析 (parsing) 匯出工具，此專案透過攔截 (intercept) Claude 原生複製按鈕 (copy button) 的 clipboard 寫入來擷取內容，因此能 100% 保留表格、LaTeX 數學公式、程式碼區塊等所有複雜格式元素。

適用對象

• 需要定期備份 Claude 對話的使用者
• 需要將 Claude 對話轉為文件歸檔的團隊
• 需要保留完整格式（含表格、程式碼）的技術使用者

2. 安裝指南

前置需求

• 任何現代瀏覽器：Chrome (推薦)、Firefox、Safari、Edge
• 瀏覽器需啟用 JavaScript
• 已登入的 Claude.ai 帳號

使用方式

此工具不需安裝，直接在瀏覽器 DevTools Console 執行即可：

步驟一：開啟 Claude 對話頁面

在瀏覽器中開啟你要匯出的 Claude.ai 對話。

步驟二：開啟 DevTools Console

步驟三：貼上腳本並執行

將 claude-chat-exporter.js 的完整內容複製後貼入 Console，按 Enter。

步驟四：等待匯出完成

腳本會在右上角顯示即時進度指示器 (status indicator)，完成後自動下載 Markdown 檔案。

效能參考

3. 核心架構解析

整體流程

flowchart TD
    A[使用者在 Console 執行腳本] --> B[setupClaudeExporter 初始化]
    B --> C[攔截 navigator.clipboard.writeText]
    B --> D[建立 UI 狀態指示器]
    B --> E[1 秒延遲後啟動 startExport]
    E --> F[fetchConversationData
從 Claude API 取得時間戳記]
    F --> G[Phase 1: 複製人類訊息
getCopyButtons false]
    G --> H[Phase 2: 複製 Claude 回應
getCopyButtons true]
    H --> I[buildMarkdown 組合輸出]
    I --> J[downloadMarkdown 下載 .md]
    J --> K[cleanup 恢復 clipboard]

模組分工

graph LR
    subgraph 資料擷取
        A1[fetchConversationData] --> A2[getMessageTimestamps]
    end
    subgraph DOM 操作
        B1[getCopyButtons] --> B2[triggerCopyButtons]
        B2 --> B3[waitForClipboardOperations]
    end
    subgraph 輸出
        C1[buildMarkdown] --> C2[downloadMarkdown]
        C3[getConversationTitle]
    end
    subgraph 生命週期
        D1[setupClaudeExporter] --> D2[startExport]
        D2 --> D3[completeExport]
        D3 --> D4[cleanup]
    end

核心設計模式

Clipboard Interception Pattern (剪貼簿攔截模式)

腳本在初始化時攔截 navigator.clipboard.writeText，將每次複製操作的文字內容存入對應的陣列 (array)，而非真的寫入系統剪貼簿。匯出完成後恢復原始函式。

Two-Phase Capture (兩階段擷取)

利用 Claude UI 的結構差異來區分人類與 Claude 的訊息：

• Claude 回應的 action bar 包含 thumbs-up feedback button (正面回饋按鈕)
• 人類訊息的 action bar 沒有此按鈕

透過此差異，getCopyButtons(claudeOnly) 能精確篩選兩類訊息的複製按鈕。

4. 核心功能詳解

4.1 對話資料擷取 (fetchConversationData)

從 Claude 的內部 API 端點取得對話 metadata (元資料)：

1/api/organizations/{orgId}/chat_conversations/{conversationId}?tree=true&rendering_mode=messages&render_all_tools=true

• conversationId 從 window.location.pathname 解析
• orgId 從 cookie 的 lastActiveOrg 欄位取得
• 回傳資料包含每則訊息的 created_at 時間戳記和對話標題 name

4.2 時間戳記比對 (getMessageTimestamps)

以訊息內容 (content) 作為 key 建立 Map<content, timestamp>，避免因 API 回傳的隱藏/系統訊息導致索引 (index) 錯位。

4.3 複製按鈕篩選 (getCopyButtons)

 1function getCopyButtons(claudeOnly) {
 2    const actionGroups = document.querySelectorAll(SELECTORS.messageActionsGroup);
 3    const buttons = [];
 4    actionGroups.forEach(group => {
 5        const hasFeedback = !!group.querySelector(SELECTORS.feedbackButton);
 6        if (hasFeedback === claudeOnly) {
 7            const copyBtn = group.querySelector(SELECTORS.copyButton);
 8            if (copyBtn) buttons.push(copyBtn);
 9        }
10    });
11    return buttons;
12}

claudeOnly=true 回傳 Claude 回應的複製按鈕；claudeOnly=false 回傳人類訊息的複製按鈕。

4.4 Markdown 組合 (buildMarkdown)

以交錯 (interleave) 方式組合人類訊息與 Claude 回應：

 1# Conversation with Claude
 2
 3## Human (Feb 23, 2026, 10:30 AM):
 4
 5[人類訊息內容]
 6
 7---
 8
 9## Claude:
10
11[Claude 回應內容]
12
13---

4.5 自動清理 (cleanup)

匯出完成 3 秒後：

1. 恢復 navigator.clipboard.writeText 為原始函式
2. 移除 UI 狀態指示器 DOM 元素

4.6 可調參數

5. 應用場景

場景 A：個人對話備份

定期將重要的 Claude 對話匯出為 Markdown，歸檔至個人知識庫（如 Obsidian、Notion）。

場景 B：團隊知識分享

將 Claude 協助產出的技術方案匯出後，分享到團隊文件系統或 wiki。

場景 C：教學材料製作

將 Claude 的教學對話匯出為格式完整的文件，直接用於培訓材料。

場景 D：技術文件歸檔

保留 Claude 協助撰寫的程式碼片段、API 設計討論、架構決策等對話紀錄。

場景 E：Prompt 工程紀錄

匯出 prompt 迭代過程，保留每次調整的完整上下文。

6. 資安掃描報告

掃描範圍

• 掃描檔案：claude-chat-exporter.js (291 行)
• 掃描模式：靜態分析 + 手動審查

掃描結果：🟢 安全

風險評估

• 低風險：navigator.clipboard.writeText 被暫時覆寫，匯出期間使用者無法使用剪貼簿複製功能（3 秒後自動恢復）
• 低風險：腳本讀取 document.cookie 中的 lastActiveOrg，但僅用於建構 claude.ai 同源 API 請求
• 注意事項：腳本需在 DevTools Console 手動貼上執行，需確認來源可信

7. FAQ

Q1：匯出的 Markdown 為何少了一些訊息？

A：確保對話頁面已完全載入所有訊息。對於長對話，先手動捲動到最頂端再執行腳本，讓所有訊息的 DOM 元素都已渲染。

Q2：出現 “No copy buttons found” 錯誤怎麼辦？

A：Claude UI 可能已更新，需要修改 SELECTORS 物件中的 CSS selector。檢查 Claude 頁面的 DOM 結構，找到新的 copy button selector。

Q3：匯出速度很慢？

A：可以調低 DELAYS.copy 的值（例如從 100ms 改為 50ms），但過低可能導致訊息遺漏。在效能較低的電腦上建議維持或調高此值。

Q4：能否匯出 Artifact 的內容？

A：目前不支援。Artifact 內容不在標準對話 DOM 中，腳本目前會跳過。此為已知限制。

Q5：能否匯出上傳的檔案或圖片？

A：不支援。腳本僅擷取文字型態的對話內容。

Q6：Safari 無法執行？

A：需先啟用 Safari 的 Develop 選單：Safari > Settings > Advanced > 勾選 “Show features for web developers”。

Q7：Issue #20 提到的 0 messages 問題是什麼？

A：部分瀏覽器環境下，navigator.clipboard.writeText 的攔截可能失效。這是已知的 open issue，可嘗試使用 Chrome 執行或檢查瀏覽器擴充套件是否干擾。

8. 進階技巧

8.1 自訂 SELECTORS

當 Claude UI 更新導致腳本失效時，可透過瀏覽器 DevTools 的 Elements 面板找到新的 CSS selector，修改腳本頂部的 SELECTORS 物件：

1const SELECTORS = {
2    copyButton: 'button[data-testid="action-bar-copy"]',
3    conversationTitle: '[data-testid="chat-title-button"] .truncate',
4    messageActionsGroup: '[role="group"][aria-label="Message actions"]',
5    feedbackButton: 'button[aria-label="Give positive feedback"]'
6};

8.2 調整延遲參數

對於超長對話（> 50 則訊息），建議調高延遲避免遺漏：

1const DELAYS = {
2    copy: 200  // 從 100ms 調高到 200ms
3};

8.3 搭配 Bookmarklet 使用

將腳本壓縮為 bookmarklet (書籤小工具) 格式，可一鍵執行：

1javascript:void(fetch('https://raw.githubusercontent.com/agarwalvishal/claude-chat-exporter/main/claude-chat-exporter.js').then(r=>r.text()).then(eval))

注意：此方式會從外部載入腳本，請確認 URL 來源可信。

8.4 Filtering Thinking Blocks

腳本的 copy button 方法天然支援 Claude 的 thinking block 篩選 — 複製按鈕產出的內容已經是最終呈現版本，不包含隱藏的 thinking 內容。

9. 整合進其他工作流

與 Obsidian 整合

1. 匯出 Markdown 檔案
2. 將檔案移入 Obsidian vault 的指定資料夾
3. 利用 Obsidian 的 tag / link 功能進行知識管理

與 AI-knowledge_template 整合

匯出的 Markdown 可直接放入 inbox/ 作為 ai-save 的輸入源，後續接入 graphify / paper-qa-lite 等 layer 進行知識圖建立或 RAG 問答。

與版本控制整合

將匯出的對話檔案納入 Git repository，追蹤每次對話的演進：

1# 建立對話歸檔目錄
2mkdir -p conversations/claude/
3# 匯出後移入
4mv ~/Downloads/*.md conversations/claude/
5git add conversations/claude/
6git commit -m "archive: Claude conversation $(date +%Y-%m-%d)"

批次匯出

目前腳本不支援一次匯出多個對話。若需批次處理，需分別開啟每個對話頁面執行腳本。未來可考慮開發瀏覽器擴充套件實現批次操作。

10. 重點摘要 Checklist

• 了解此工具是純瀏覽器端 JavaScript 腳本，無需安裝
• 了解核心原理：攔截 clipboard.writeText 擷取 copy button 的輸出
• 了解兩階段擷取：先人類訊息（無 feedback button）再 Claude 回應（有 feedback button）
• 了解時間戳記從 Claude 內部 API 取得，以內容比對避免索引錯位
• 了解 SELECTORS 和 DELAYS 是主要的可調參數
• 了解限制：不支援 Artifact、附件、圖片匯出
• 了解資安評估為 🟢 安全：無第三方請求、無資料外傳、clipboard 暫時攔截後自動恢復
• 了解 Issue #20（clipboard.write 未被攔截）為目前主要 open issue

11. 進一步閱讀

• GitHub Repository — 原始碼與完整 README
• Issue #20 — clipboard.write 攔截問題討論
• Issue #11 — Web search 結果遺漏問題
• Clipboard API - MDN — 瀏覽器 Clipboard API 官方文件
• PR #13 — 統一 copy-button 方法的重大重構