一、问题背景1.1 遇到了什么痛点在日常使用 DeepSeek、ChatGPT、Claude 等 AI 工具撰写报告时我反复遇到同一个问题AI 输出的 Markdown 格式表格、代码块、数学公式在网页上排版完美但复制到 Word 后格式全部丢失——表格变成纯文本、代码块失去高亮、LaTeX 公式变成乱码AI 的思考过程和搜索引用编号如-14-15、[5](url)混入正文需要手动删除切换不同 AI 平台时每个平台的操作方式不同无法统一处理核心矛盾AI 大幅提升了内容生成效率但从 AI 输出到可用文档这最后一公里全靠手动。1.2 现有方案为什么不够方案问题直接复制粘贴格式全丢引用编号混入AI 平台自带的导出仅少数平台有且功能简陋第三方 Markdown 编辑器仍需手动搬运无法自动清洗截图转 Word无法编辑图片模糊1.3 本文要解决什么构建一个浏览器扩展Manifest V3自动在 AI 对话页面注入捕获按钮点击后将 AI 回复清洗、转换为标准 Markdown 并渲染预览最终导出为 Word 文档。全过程一句话点按钮 → 编辑 → 导出。二、方案设计2.1 整体架构┌─────────────────────────────────────────────────────────┐ │ NQ-Assistant 架构 │ │ │ │ AI 网页DeepSeek/ChatGPT/Claude/Kimi/豆包 │ │ │ │ │ ▼ content.js注入按钮 DOM 提取 │ │ │ │ │ ▼ background.js消息中转 chrome.storage 持久化 │ │ │ │ │ ▼ sidepanel.jsmarkdown-it 渲染 编辑 导出 │ │ │ │ │ ▼ Word 文档HTML-DOC 格式WPS/Word 原生兼容 │ └─────────────────────────────────────────────────────────┘2.2 为什么选择这个架构决策点选择原因扩展类型Manifest V3 Side Panel侧边栏不遮挡网页可边对话边预览Markdown 渲染markdown-it而非 marked/showdown浏览器兼容性最好表格/代码块支持完整Word 导出HTML-DOC而非 docx.jscsshtml 嵌入Word/WPS 原生打开无需额外库存储chrome.storage.localManifest V3 不支持 localStorage且 storage 支持跨设备同步依赖策略全部本地打包零网络请求避免 CDN 被墙国内用户友好2.3 关键风险与应对⚠️风险 1各 AI 平台的 DOM 结构不同且随时可能更新应对使用平台检测 可配置选择器每个平台独立配置message和markdown的选择器⚠️风险 2element.innerHTML直接展示在侧栏会有 css 冲突应对预览走 Markdown→HTML 渲染保证样式一致性导出保留原始 HTML保证格式 100% 保真三、核心实现3.1 多平台 DOM 提取每个 AI 平台的网页结构不同。通过平台检测 选择器配置实现统一接口// content.js — 平台自动检测与选择器配置constPLATFORMS{deepseek:{host:chat.deepseek.com,message:.ds-message,// 消息容器markdown:.ds-markdown,// Markdown 渲染容器think:.ds-think-content, [class*think]},chatgpt:{host:chatgpt.com,message:[data-message-author-roleassistant],markdown:.markdown, [class*prose],think:[class*think], [class*reasoning]},claude:{/* ... */},kimi:{/* ... */},doubao:{/* ... */}};// 运行时自动检测functiondetectPlatform(){consthostwindow.location.hostname;for(const[key,cfg]ofObject.entries(PLATFORMS)){if(host.includes(cfg.host.replace(https://,)))return{key,...cfg};}}3.2 HTML 清洗管线从 DOM 到可用的 Markdown 需要经过多层清洗。这是整个工具的核心逻辑// content.js — 内容提取管线functionextractContent(el){constcloneel.cloneNode(true);// 第1层移除思考过程 DOM 节点removeThinking(clone);// → 去掉 .ds-think-content 等思考区块// 第2层移除 UI 元素按钮、图标、工具栏removeUIElements(clone);// → 去掉复制、下载按钮和代码块工具栏// 第3层移除引用链接上标数字、citation 类元素removeCitationLinks(clone);// → 去掉 sup1/sup、[-5](url) 等引用// 第4层保存清洗后的 HTML导出用100% 保真consthtmlclone.innerHTML.trim();// 第5层HTML → Markdown预览和编辑用constmdelementToMarkdown(clone);// → h3 → ###, table → |---|, code → 等return{html,md};}为什么分两层html mdhtml保留 AI 网页的原始渲染效果导出时直接嵌入 Word排版 100% 还原md转换为 Markdown 后预览和编辑格式统一且易于修改3.3 HTML → Markdown 转换这是最复杂的一环。AI 网页将 Markdown 渲染为 HTML我们需要逆向还原// content.js — DOM 元素到 Markdown 语法的转换functionelementToMarkdown(el){constchildrenArray.from(el.children);if(children.length0)returngetText(el);letmd;for(constchildofchildren){consttagchild.tagName.toLowerCase();consttextgetText(child);switch(tag){caseh1:md\n# text\n;break;caseh2:md\n## text\n;break;caseh3:md\n### text\n;break;casep:md\nprocessInline(child)\n;break;casepre:mdprocessCode(child);break;caseul:mdprocessList(child,false);break;caseol:mdprocessList(child,true);break;casetable:mdprocessTable(child);break;caseblockquote:md\n text.replace(/\n/g,\n )\n;break;// ... 更多标签处理}}returnmd.replace(/\n{3,}/g,\n\n).trim();}3.4 引用编号清理DeepSeek 搜索模式会在文中插入引用编号格式多变原始: 追溯到1912年-14-15被评为国家级一流本科专业-15-29。 清洗: 追溯到1912年被评为国家级一流本科专业。需要处理-14-15、-29、[-5]、[-5](url)等多种格式同时保护真正的年份范围1912-1920functionstripCitations(md){// 1. 移除 -数字-数字如 -14-15mdmd.replace(/[\-–—]\d{1,3}[\-–—]\d{1,3}/g,);// 2. 移除 -数字保护年份 1912-1920mdmd.replace(/([\-–—])\s*(\d{1,3})(?[。\n]|$)/g,(match,dash,num){constctx/* 检查上下文是否为年份 */;if(isYearRange(ctx))returnmatch;// 保留年份return;// 移除引用});// 3. 移除 [-5](url) 和 [5] 格式mdmd.replace(/\[-?\d{1,3}([,\-]\d{1,3})*\]\([^)]*\)/g,);mdmd.replace(/\s*\[-?\d{1,3}([,\-]\d{1,3})*\]/g,);returnmd;}3.5 数学公式处理AI 网页使用 KaTeX 将 LaTeX 渲染为 HTML。提取时需要还原// content.js — KaTeX HTML → $...$ / $$...$$functionconvertKatexToLatex(root){root.querySelectorAll(.katex).forEach(katexEl{// 从 annotation encodingapplication/x-tex 提取原始 LaTeXconstannotationkatexEl.querySelector(annotation[encodingapplication/x-tex]);if(annotation){constlatexannotation.textContent.trim();constisDisplaykatexEl.closest(.katex-display)!null;constwrapperisDisplay?\n$$\nlatex\n$$\n:$latex$;// 替换 KaTeX 元素为文本节点katexEl.parentNode.replaceChild(document.createTextNode(wrapper),katexEl);}});}在侧栏渲染时需要区分真正的数学公式和解释性文字中的示例// sidepanel.js — 智能数学公式检测letpmd.replace(/\$\$([\s\S]?)\$\$/g,(_,m)/[\\\^_{}]/.test(m)// 含有 LaTeX 符号?div classmath-blockesc(m)/div// → 公式:code$$esc(m)$$/code// → 代码示例);3.6 导出管线导出使用msg.html清洗后的原始 HTML确保 Word 中排版与网页一致// sidepanel.js — 导出functiongetExportHTML(msgs,tpl){constbodyHtmlmsgs.map((m,i){constrenderedm.html||renderMarkdown(m.content);// html 优先returnrendered(imsgs.length-1?div classpage-break/div:);}).join(\n);return!DOCTYPE htmlhtml langzh-CN headmeta charsetUTF-8titleNQ-Assistant/title style${getExportCSS(tpl)}/style/head body${bodyHtml}/body/html;}四、验证效果4.1 测试环境项目配置浏览器Edge 126 / Chrome 126操作系统Windows 11测试平台DeepSeek R1、ChatGPT 4o、Claude 3.5 Sonnet、Kimi、豆包测试内容含表格/代码块/LaTeX公式/多级标题的 AI 回复4.2 测试结果测试项DeepSeekChatGPTClaudeKimi豆包按钮注入✅✅✅✅✅表格保留✅✅✅✅✅代码块保留✅✅✅✅✅数学公式✅✅✅✅✅思考过程过滤✅N/AN/A✅✅引用编号清理✅✅✅✅✅Word 导出✅✅✅✅✅4.3 边界与局限DOM 结构变化风险各平台可能随时更新前端代码导致选择器失效。可通过更新PLATFORMS配置修复复杂表格跨行/跨列的合并单元格可能不完全保留图片AI 生成的图片引用可能因跨域无法导出4.4 项目展示五、安装与使用5.1 获取代码gitclone https://github.com/NQLOVELSJ/NQ_Assitant.git5.2 加载到浏览器打开edge://extensions或chrome://extensions开启「开发人员模式」点击「加载解压缩的扩展」→ 选择项目文件夹工具栏出现图标 ✅5.3 使用打开任意支持的 AI 平台正常对话AI 回复下方出现 预览按钮点击 → 侧边栏捕获编辑、排序、选模板 → 导出所选 Word快捷键CtrlE快速导出六、总结本文从实际痛点出发完整介绍了如何构建一个跨平台 AI 回复导出工具。核心思路是DOM 清洗 → 多层过滤 → 双轨输出Markdown 预览 HTML 导出。这个方案的适用边界✅ 适用于需要从 AI 对话中提取格式化内容的场景✅ 核心清洗逻辑可复用到其他浏览器扩展⚠️ 依赖各平台 DOM 结构的稳定性需定期维护选择器 GitHubhttps://github.com/NQLOVELSJ/NQ_Assitant LicenseMIT本文所有代码均为 NQ-Assistant 项目实际代码可直接运行验证。
