鱼得水：豆包没完善的功能，被我实现了

鱼得水：豆包没完善的功能，被我实现了 鱼得水：豆包没完善的功能，被我实现了 Modified August 14, 2025 右键复制该选中的dom结构 打开豆包网页版，创建一个新对话，输入以下提示词，让LLM代替我们完成分析过程 Code block Markdown Copy [此处粘贴复制的DOM结构] 请你作为资深开发，以上HTML为MD渲染后的结果，请你分析MD与HTML的对应关系 接下来等待豆包同学完成分析任务，分析结果如下 步骤二：根据分析结果，编写油猴脚本代码 完成分析后，让豆包同学根据以上分析过程，创建油猴脚本实现复制功能，提示词如下 Code block Markdown Copy 编写油猴脚本，实现复制功能，将以上HTML复制成MD格式 生成完成后，复制代码，然后粘贴到油猴插件中，保存为脚本即可 步骤三：测试油猴脚本 接着回到豆包，刷新网页，此时就会看到左上角出现绿色按钮 激活canvas功能，点击按钮，就能顺利将内容复制为MD格式了 尾声 通过以上步骤，我们顺利实现了 。 不过还存在一些不够完美的地方，比如： Code block Markdown Copy 1. 复制按钮应该要位于页面右下角 2. 存在部分码片段被分割到多个<span 元素中的特殊情况 3. 有序列表的序号没有实现递增等问题 这些问题也依旧能通过多轮对话的方式，让豆包帮助我们逐一完善。 通过此次分享，相信大家对AI编程有更深入的了解，也希望大家能使用AI编程，尝试解决工作生活中遇到的问题。 优化后的油猴脚本代码如下 Code block JavaScript Copy // ==UserScript== // @name 豆包CANVAS HTML转Markdown复制工具 // @namespace http://tampermonkey.net/ // @version 1.0 // @description 将豆包CANVAS HTML内容复制为Markdown // @author 鱼得水 // @match ://www.doubao.com/ // @grant GM setClipboard // @require https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.min.js // ==/UserScript== (function() { 'use strict'; // 创建复制按钮 const button = document.createElement('button'); button.innerText = '复制为Markdown'; button.style.position = 'fixed'; button.style.bottom = '20px'; button.style.right = '20px'; button.style.zIndex = '9999'; button.style.padding = '10px 15px'; button.style.backgroundColor = ' 4CAF50'; button.style.color = 'white'; button.style.border = 'none'; button.style.borderRadius = '5px'; button.style.cursor = 'pointer'; button.style.boxShadow = '0 2px 5px rgba(0,0,0,0.2)'; document.body.appendChild(button); // 转换函数：HTML转Markdown function convertToMarkdown(element) { let markdown = ''; const children = element.childNodes; children.forEach(child = { // 处理元素节点 if (child.nodeType === 1) { const $child = $(child); // 处理标题 if ($child.hasClass('heading h1')) { markdown += ' ' + $child.text().trim() + '\n\n'; } else if ($child.hasClass('heading h2')) { markdown += ' ' + $child.text().trim() + '\n\n'; } else if ($child.hasClass('heading h3')) { markdown += ' ' + $child.text().trim() + '\n\n'; } // 处理有序列表（关键改进：正确处理序号递增） else if ($child.hasClass('ol idyHGHZZv2') || $child.hasClass('ol id6gRa9yap') || $child.hasClass('ol id8PQwX53E') || $child.hasClass('ol idYEcOvYE0') || $child.find('ol.list number1').length 0) { // 获取列表起始序号（从data start属性提取） const olElement = $child.find('ol.list number1').first(); const startNumber = olElement.data('start') || 1; // 遍历列表项，确保序号连续递增 olElement.find('li').each((index, li) = { 右键复制该选中的dom结构 打开豆包网页版，创建一个新对话，输入以下提示词，让LLM代替我们完成分析过程 接下来等待豆包同学完成分析任务，分析结果如下 步骤二：根据分析结果，编写油猴脚本代码 完成分析后，让豆包同学根据以上分析过程，创建油猴脚本实现复制功能，提示词如下 生成完成后，复制代码，然后粘贴到油猴插件中，保存为脚本即可 步骤三：测试油猴脚本 接着回到豆包，刷新网页，此时就会看到左上角出现绿色按钮 激活canvas功能，点击按钮，就能顺利将内容复制为MD格式了 尾声 通过以上步骤，我们顺利实现了 。 不过还存在一些不够完美的地方，比如： 这些问题也依旧能通过多轮对话的方式，让豆包帮助我们逐一完善。 通过此次分享，相信大家对AI编程有更深入的了解，也希望大家能使用AI编程，尝试解决工作生活中遇到的问题。 优化后的油猴脚本代码如下 缘起 不知道大家在使用豆包的canvas功能时有没有这样一个疑惑，为什么无法直接把画布中的内容复制为MD格式。 选中后 Ctrl+C？出来的是纯文本 “裸奔版”； 点击“复制”按钮？依旧是不带格式的 “素面朝天款”。 折腾半天，最后只能走 “下载文件→打开→再复制” 的迂回路线来获取MD格式内容。这波操作下来，耐心值直接告急！ 既然豆包没有提供完善的复制功能，那就只能自己动手实现了（文末提供代码复制） 思路 canvas功能实现的是，将原本 LLM 生成的MD格式内容渲染成HTML网页。 那么这其中必然有一套规则来实现转换过程。只需要“破解”出这一过程，就能随意进行格式转化操作 实践 理论存在，实践开始！ 本次AI编程的目标为：创建一个油猴脚本，来实现canvas HTML转md格式功能，实现过程一共分为3个步骤。 步骤一：分析出DOM结构（HTML）与 MD之间的关系 首先先来获取canvas区域的DOM结构 按下键盘F12换出浏览器开发者工具，点击元素审查功能，接着鼠标指针点击canvas区域,