DeepSeek & 豆包 AI Outline Companion 插件全解析 / Dual-Site AI Outline Companion Deep Dive

项目概览 Overview

这款 AI Outline Companion Chrome 扩展专为 chat.deepseek.com 与 doubao.com/chat 场景打造，能够在浏览器右上角注入悬浮面
板，自动解析长篇 AI 对话并生成可点击的大纲索引，帮助读者快速跳转到任意问答片段。
This Chrome extension targets chat.deepseek.com and doubao.com/chat, injecting a floating panel that parses lengthy AI
conversations into a clickable outline so readers can jump to any question-answer block instantly.

扩展依托 Manifest V3 内容脚本，在页面加载后注入 scripts/content.js 与 styles/content.css，无需外部依赖即可完成 DOM 监
听、按需刷新、大纲渲染与锚点滚动。
Powered by a Manifest V3 content script, it loads scripts/content.js and styles/content.css after the page becomes
idle, requiring no extra dependencies to watch DOM changes, refresh on demand, build the outline, or scroll to
anchors.

核心功能 Core Capabilities

  • 自动问答配对 / Auto Q&A Pairing：根据 .ds-message 与 data-testid=”message_content” 结构识别用户提问与助手回答，形成
    成对节点。
    Automatically pairs prompts and responses by inspecting .ds-message or data-testid=”message_content” blocks.
  • 锚点注入 / Anchor Injection：为每条消息与提炼出的标题、列表项添加 data-deepseek-outline-anchor，点击即滚动并高亮。
    Injects data-deepseek-outline-anchor on every message plus extracted headings or list items for smooth scrolling
    and highlight.
  • 面板控制 / Panel Controls：内置刷新按钮、自动更新开关、折叠开关，以及 Alt+Shift+R / Alt+Shift+O 快捷键。
    Ships with refresh, auto-update toggle, collapse toggle, plus keyboard shortcuts Alt+Shift+R and Alt+Shift+O.
  • 状态记忆 / Persistent Settings：利用 deepseek-outline-settings localStorage 记住自动/折叠偏好。
    Persists auto-refresh and collapsed state via deepseek-outline-settings in localStorage.
  • 多站点预设 / Multi-Site Presets：SITE_PRESETS 描述所需选择器、标题抽取、角色判断，实现 DeepSeek 与豆包双站兼容。
    SITE_PRESETS stores selectors, heading extraction, and role detection rules to support both DeepSeek and Doubao.

多站点适配架构 Multi-Site Adaptation

扩展在 SITE_PRESETS 中定义两个配置：

  • DeepSeek：使用 .ds-message、.ds-markdown 等类名，判断 .d29f3d7d 或 .fbb737a4 识别用户消息。
  • Doubao：匹配 [data-testid=”message_content”][data-message-id]，通过 .justify-end 判断用户侧，抽取 .flow-markdown-
    body 等容器文本。

Each preset includes match, messageSelector, headingSelector, bulletSelector, answerTextSelector, and a detectRole
function. During runtime the script selects the preset by window.location.host, guaranteeing only supported domains
receive injections.

UI 结构 UI Composition

  • 悬浮面板 Floating Panel：#deepseek-outline-panel 固定于右上角，宽 340px，背景采用透明黑与模糊效果，支持 is-collapsed
    状态。
  • 控制区 Controls：刷新、自动、折叠按钮位于 header 右侧，按钮样式来自 .dso-btn，具备 hover 反馈。
  • 大纲容器 Outline Body：.dso-outline 提供滚动区域，.dso-outline-block 代表一组问答，内部包含 .dso-question、.dso-
    answer 与 .dso-outline-children。
  • 高亮样式 Highlight：当 .dso-outline-row 处于 active 状态时会增加背景与左侧强调条，页面目标节点加 .dso-scroll-
    highlight 外框。

安装与快速上手 Setup & Quick Start

  1. 打开 Chrome 地址栏输入 chrome://extensions 并启用“开发者模式”。
    Open chrome://extensions and enable “Developer Mode”.
  2. 点击“加载已解压的扩展程序”，指向包含 manifest.json 的目录。
    Click “Load unpacked” and select the folder containing manifest.json.
  3. 访问 https://chat.deepseek.com/ 或 https://www.doubao.com/chat/，等待页面加载完毕。
    Navigate to either supported site and wait for it to load.
  4. 右上角出现 “DeepSeek Outline” 或 “豆包 Outline” 面板后，点击“刷新”或按 Alt+Shift+R 生成大纲。
    Once the panel appears, hit “Refresh” or Alt+Shift+R to build the outline.
  5. 若需保持页面整洁，可点“折叠”或使用 Alt+Shift+O 收起面板。
    Use “Collapse” or Alt+Shift+O to tuck the panel when not needed.

工作流示例 Workflow Example

  1. 进入对话：在 DeepSeek 打开一段包含多轮问答的历史记录。
    Open a multi-turn conversation on DeepSeek.
  2. 自动扫描：MutationObserver 侦测到 .ds-message 变动后触发 scheduleRefresh(‘mutation’)。
    MutationObserver detects .ds-message updates and schedules a refresh.
  3. 大纲生成：buildOutline 逐条识别角色，组合提问摘要与回答概览，提取标题/列表。
    buildOutline pairs roles, summarizes questions/answers, and extracts headings or bullet items.
  4. 锚点可视化：点击任一条目，scrollToAnchor 定位对应消息并添加 .dso-scroll-highlight。
    Clicking an entry triggers scrollToAnchor, focusing and highlighting the target.
  5. 状态同步：IntersectionObserver 判定可视消息，更新 .is-active，状态栏展示“共 N 组对话 · 自动更新”。
    IntersectionObserver tracks visible anchors to update .is-active, while the status bar reports total pairs and
    mode.

同样流程适用于豆包，只是依赖不同的 DOM selector 与角色判断。

配置速查表 Quick Reference Table

站点 Site 面板标题 Panel Title 消息选择器 Message Selector 角色判断 Role Detection 标题来源 Heading Source
DeepSeek DeepSeek Outline .ds-message .d29f3d7d/.fbb737a4 => user .ds-markdown h1~h6
豆包 Doubao 豆包 Outline [data-testid=”message_content”][data-message-id] .justify-end => user h1~h6 within
message

关键代码片段 Key Code Snippets

Manifest V3 匹配范围 Manifest Matching

{
“manifest_version”: 3,
“name”: “DeepSeek Outline Companion”,
“version”: “0.1.0”,
“content_scripts”: [
{
“matches”: [
“https://chat.deepseek.com/“,
“https://.doubao.com/chat/*”
],
“run_at”: “document_idle”,
“css”: [“styles/content.css”],
“js”: [“scripts/content.js”]
}
]
}

SITE_PRESETS 结构 SITE_PRESETS Structure

const SITE_PRESETS = [
{
id: ‘deepseek’,
panelTitle: ‘DeepSeek Outline’,
messageSelector: ‘.ds-message’,
headingSelector: ‘.ds-markdown h1, … h6’,
detectRole: (el) => {
if (el.classList.contains(‘d29f3d7d’)) return ‘user’;
if (el.querySelector(‘.fbb737a4’)) return ‘user’;
return ‘assistant’;
}
},
{
id: ‘doubao’,
panelTitle: ‘豆包 Outline’,
messageSelector: ‘[data-testid=”message_content”][data-message-id]’,
headingSelector: ‘h1, h2, h3, h4, h5, h6’,
detectRole: (el) => (el.classList.contains(‘justify-end’) ? ‘user’ : ‘assistant’)
}
];

面板模板 Panel Template

panel.innerHTML = <header class="dso-header"> <div> <strong class="dso-title">${panelTitle}</strong> <span class="dso-subtitle">${panelSubtitle}</span> </div> <div class="dso-actions"> <button class="dso-btn" data-action="refresh" title="刷新大纲 (Alt+Shift+R)">刷新</button> <button class="dso-btn" data-action="auto">${state.autoRefresh ? '自动:开' : '自动:关'}</button> <button class="dso-btn" data-action="collapse">${state.collapsed ? '展开' : '折叠'}</button> </div> </header> <div class="dso-status" role="status">等待对话内容...</div> <div class="dso-outline" role="tree"></div> ;

使用技巧 Usage Tips

  • 手动刷新 Manual Refresh：当页面加载早于扩展时，立刻点击“刷新”以避免遗漏早期对话。
    If the page loads before the extension, hit “Refresh” to capture existing content.
  • 自动模式 Auto Mode：默认开启；若在低性能设备上浏览，可关掉自动并在需要时手动刷新。
    Auto mode is on by default; disable it on low-end machines and refresh manually when needed.
  • 折叠面板 Collapsed Mode：阅读文档时可折叠面板，IntersectionObserver 仍在后台跟踪锚点。
    Collapse the panel when reading; the observer continues tracking anchors in the background.
  • 快捷键 Shortcuts：记住 Alt+Shift+R 与 Alt+Shift+O，无需鼠标即可控制。
    Use Alt+Shift+R and Alt+Shift+O for quick control.

示例 Scenario Example

场景 / Scenario：在豆包上运行长篇写作代理，生成包含多个章节与列表的响应。
With Doubao running a long-form writing agent that outputs multiple chapters and bullet lists.

  1. 开启代理任务，待输出出现多个 h1/h2。
    Start the agent and wait for multiple h1/h2 blocks to appear.
  2. Outline 面板自动识别章节标题，例如 “核心功能亮点”“安装步骤”。
    The panel auto-detects headings such as “核心功能亮点” or “安装步骤”.
  3. 点击“安装步骤”条目，页面滚动到对应 data-message-id，并以蓝色轮廓强调。
    Clicking “安装步骤” scrolls to the matching data-message-id and highlights it in blue.
  4. 若继续提问，MutationObserver 触发新一轮 buildOutline，条目实时更新。
    Subsequent prompts trigger buildOutline again, keeping the outline live.

常见问题 FAQ

Q1：为什么我在非 DeepSeek/豆包站点看不到面板？
A1：manifest 的 matches 仅包含 https://chat.deepseek.com/* 与 https://.doubao.com/chat/，其他域名不会注入内容脚本。

Q2：面板没有自动刷新怎么办？
A2：可能已关闭自动模式。点击“自动:关”按钮切换为“自动:开”，或使用 Alt+Shift+R 手动刷新。

Q3：跳转后锚点高亮持续多久？
A3：scrollToAnchor 在目标节点上添加 .dso-scroll-highlight，约 1200ms 后自动移除。

Q4：如何保持面板设置？
A4：扩展使用 localStorage 的 deepseek-outline-settings 保存自动刷新与折叠状态，重开页面会沿用。

Q5：能否扩展到更多站点？
A5：可以在 SITE_PRESETS 中追加新的 match 与选择器配置，同时在 manifest.json 的 matches 列表添加对应站点。

结语 Conclusion

借助 Manifest V3 内容脚本与精心设计的 SITE_PRESETS 架构，这款 AI Outline Companion 为 DeepSeek 与豆包的长篇对话提供了
即时、可靠、可导航的大纲体验。通过自动配对问答、提取标题、注入锚点以及提供快捷控制，它显著降低了阅读冗长聊天记录的门
槛。开发者亦可在 scripts/content.js 与 styles/content.css 的清晰结构上，继续扩展更多站点或新增导出功能，让多轮 AI 对话
的复盘更加高效顺滑。

下载地址：http://xugj520.cn/AI%20Outline%20Companion%20Chrome.zip