告別 AI 對話「無限滾動」地獄：ChatTOC 如何將冗長聊天變成結構化知識庫

為什麼我們需要給 AI 對話裝上「導航儀」？

在與 ChatGPT（或 Claude、DeepSeek）進行長達 50 輪的對話時，經常會遇到這樣的情況：對話進行到一半，突然想起「它在第 10 輪給出的那個優化建議是什麼來著？」

於是開始向上滾動滑鼠滾輪，眼睛在密密麻麻的文字流中搜尋，試圖從一堆「好的，這是修改後的代碼…」中找到想要的那一段。

AI 對話介面的原生設計，本質上是「流式」的，它假設用戶只關注當下。但在實際的生產力場景中，一場高質量的對話往往是一份非線性的文檔。

這就是 ChatTOC 試圖解決的痛點。

這款工具不是顛覆性的 AI 模型，而是一個務實的「外掛」。它的核心邏輯很簡單：把線性的對話流，重構成可跳轉的目錄結構。

本文將介紹它的使用方法，以及如何利用它優化 AI 協作工作流。

---

核心功能實測：不只是「目錄」那麼簡單

ChatTOC 的官方頁面很簡潔，經過深度使用後，發現它在細節處理上非常符合「知識工作者」的直覺。

1. 跨平台的統一體驗

市面上有很多針對 ChatGPT 的增強插件（比如 Superpower ChatGPT），但它們通常只服務於單一平台。ChatTOC 的聰明之處在於它做了一個「通用層」。

無論是在用 ChatGPT 寫代碼，用 Claude 分析長文檔，還是用 DeepSeek 進行深度推理，甚至是 Gemini 或 豆包，它的側邊欄體驗是完全一致的。

這意味著不需要為每個 AI 平台去尋找不同的插件，對於同時使用 3-4 個模型的用戶來說，極大降低了割裂感。

2. 智能目錄與「閱讀進度」

安裝後，瀏覽器右側會多出一個懸浮面板。它會自動抓取對話中的關鍵節點（通常是用戶的提問或 AI 的標題輸出）。

• 一鍵定位：點擊目錄，頁面瞬間滾動到對應位置，並會有高亮閃爍提示。
• 進度記憶：這是一個被低估的功能。當關閉頁面再重新打開時，它會記得上次看到哪裡。這對於閱讀長篇 AI 生成的小說或技術文檔非常有用。

3. 知識沉澱：導出為 Markdown

這是最實用的功能之一。

通常想保存對話時，只能複製貼上，格式往往會亂掉。ChatTOC 允許將選中的對話（或全部對話）導出為 Markdown 或 JSON。

實戰場景：用 DeepSeek 完成一個技術方案的討論後，可以直接用 ChatTOC 導出 Markdown，然後導入 Obsidian 或 Notion。因為格式已經結構化，幾乎不需要二次編輯，這才是真正的「知識沉澱」。

---

深度配置：如何讓 ChatTOC 適配「冷門」或自建站點？

ChatTOC 宣稱支持「自定義站點規則」，這點非常實用。這意味著如果在本地部署了 Ollama WebUI，或者使用了一些小眾的 AI 套殼站，依然可以讓 ChatTOC 生效。

這部分官方文檔講得比較簡略，這裡提供一個實戰教程。

假設有一個自建的 AI 網頁，ChatTOC 默認無法識別。需要進入設置頁面的「自定義規則」部分。

原理分析

ChatTOC 本質上是通過 DOM 選擇器（CSS Selectors）來抓取頁面上的「問題」和「回答」，然後生成目錄。需要告訴它：

1. 哪個元素代表「一條消息容器」？
2. 哪個元素代表「用戶提問」？
3. 哪個元素代表「AI 回答」？

配置代碼示例

以下是一個通用的配置模板，可以根據目標網站進行修改（按 F12 檢查元素獲取類名）：

{
  "sites": [
    {
      "name": "My Local Ollama UI",
      "urlPattern": "localhost:3000", 
      "selectors": {
        // 每一輪對話的包裹容器
        "messageBlock": ".chat-message-row",
        
        // 用戶提問的文本選擇器
        "userSelector": ".user-message .content",
        
        // AI 回答的文本選擇器
        "aiSelector": ".assistant-message .markdown-body",
        
        // (可選) 如果你想排除某些系統提示
        "excludeSelector": ".system-notification"
      },
      "behavior": {
        "autoScroll": true,
        "observeChanges": true
      }
    }
  ]
}

⚠️ 注意事項：

• urlPattern：支持正則表達式或部分匹配。
• selectors：這是最關鍵的。如果選擇器寫錯了，目錄就會是空的。建議先在瀏覽器控制台用 document.querySelector('.your-class') 測試一下。

通過這種方式，ChatTOC 實際上變成了一個「萬能」的對話導航器，而不僅僅局限於官方支持的那幾個大廠平台。

---

競品對比：ChatTOC 值得安裝嗎？

為了客觀評價，將它與其他常見方案做個對比：

功能維度	ChatTOC	Superpower ChatGPT	原生瀏覽器搜索 (Ctrl+F)
跨平台支持	全面 (Claude/DeepSeek/Gemini等)	僅限 ChatGPT	所有網頁
目錄生成	自動結構化	有，但功能繁雜	無
導出格式	Markdown / JSON	多種格式	無
隱私安全	本地處理，無數據上傳	功能多，權限要求高	本地
輕量級	極輕，專注導航	重，功能過載	極輕
自定義站點	支持	不支持	N/A

結論：

• 如果是 ChatGPT 重度依賴者，且需要文件夾管理、提示詞庫等複雜功能，Superpower ChatGPT 可能更適合。
• 如果是 多模型使用者（比如同時用 Claude 寫文，用 DeepSeek 寫代碼），且只想要一個乾淨、純粹的導航和導出工具，ChatTOC 是目前的最佳選擇。

---

實操建議：如何配合 ChatTOC 獲得最佳體驗？

工具只是輔助，使用習慣才是關鍵。為了讓 ChatTOC 生成的目錄更清晰，建議調整向 AI 提問的策略：

1. 使用「結構化提示詞」

當開啟一個新話題時，明確告訴 AI 使用標題。

錯誤示範：

幫我分析一下這段代碼的問題，然後改一下。

優化示範：

請分析這段代碼。輸出請包含以下部分，並使用 Markdown 二級標題（##）：

1. 問題診斷
2. 優化思路
3. 重構後的代碼

這樣，ChatTOC 就能精準抓取到「問題診斷」、「優化思路」等標題，目錄會非常漂亮且實用。

2. 善用「書籤」功能進行複盤

在長對話中，可能有 80% 的內容是廢話或試錯過程。 利用 ChatTOC 的書籤功能（Bookmark），只標記那些「里程碑」式的回答。導出時，可以選擇只導出書籤內容，這樣就自動過濾了噪音，生成了一份精華筆記。

---

批判性視角：它還有什麼缺點？

雖然 ChatTOC 評價很高，但它並非完美：

1. 移動端缺失：目前僅作為瀏覽器擴充存在，手機上無法使用。但考慮到長對話主要發生在桌面端，這可以接受。
2. 依賴頁面結構：如果 ChatGPT 或 Claude 大改版（修改了 CSS 類名），插件可能會暫時失效，需要等待開發者更新或自己手動修復規則。
3. 導出樣式單一：目前的 Markdown 導出比較原始，如果能支持自定義導出模板（比如自動加上 Frontmatter）會更完美。

總結

ChatTOC 是一款典型的「小而美」工具。它沒有用 AI 去打敗 AI，而是用傳統的 UI/UX 思維去解決 AI 帶來的交互問題。

在 AI 生成內容越來越長的今天，「導航」和「結構化」的能力與「生成」能力同樣重要。

如果不想再在幾萬字的對話記錄裡大海撈針，建議花 1 分鐘安裝這個擴充功能。它免費、隱私安全，且能立即提升工作效率。

下載連結： Chrome Web Store (搜索 ChatTOC) 官方網站： chattoc.aichris.cc

---

參考資料 / References:

• ChatTOC Official Documentation
• Chrome Developers - Extension Architecture