一、Demo 简介
这是一个帮助高频使用web的开发者、内容创作者、学生解决「从网页复制内容到 AI 时格式丢失、整理耗时」问题的 Chrome 浏览器扩展。
核心用户画像很具体：每天需要在web页之间来回切换的人——比如从 API 文档复制代码示例到 DeepSeek 提问、从论坛发帖内容让 AI 总结、从网页内容让AI进行页面结构分析、看到好的图片需要ai去反推模仿处理等等。
- 替代ctrl+c/v 快速复制粘贴，提高工作效率
- 解决一些直接给ai链接没法识别或者识别效果不好的问题
- 部分解决一些文档页面限制无法获取内容的问题
ClipFlow 的三个核心功能：
-
智能识别模式：鼠标悬停自动识别网页上的内容块，支持元素级精准选中，也支持整页批量提取。
-
多格式一键输出：选中内容后可输出为 Markdown / 富文本 HTML / 结构树 / JSON 四种格式，直接复制到剪贴板或一键跳转到 DeepSeek / 豆包 / ChatGPT 并自动填入输入框。
-
截图 + 长截图 + 导出编辑器：支持区域截图和自动滚动长截图，截图后可在编辑器中裁剪标注；AI 对话内容可导出到整理编辑器，一键去除空行、去重、正则替换等。
二、Demo 创作思路
灵感来源：
这个灵感来自己的真实日常。比如我在TRAE参加比赛看到一大段内容，我想整理成一个skills帮我发帖要么快捷键全都复制了，要么鼠标拖动起来很麻烦，还在用传统的办法搬运数据。
想解决的问题：
不是做一个大而全的「网页抓取工具」，不是爬虫，而是聚焦一个具体场景：用户不需要拖来拖去不停切换，点一下就行。
为什么做这个方向：
- 简单，不需要特别复杂的技术知识，非技术开发背景也能coding起来
- 实用，至少能解决我自己的问题，立马用的起来
- 可扩展，比如增加一些预置提示词、更多的跳转方式、转换格式等等
三、Demo 体验地址
GitHub 仓库（开源代码）： TRAE项目-ClipFlow
演示视频：小破站bilibili
Chrome 开发者模式安装：
- 下载仓库代码并解压
- 打开 Chrome →
chrome://extensions/→ 开启「开发者模式」 - 点击「加载已解压的扩展程序」→ 选择
trae-creative-proposal/clipflow-extension文件夹
四、TRAE 实践过程
任务一：搭建扩展基础框架与识别模式
任务目标： 根据报名文件和详细需求，使用spec模式确认开发计划进行开发。
与 TRAE 协作：
我从零开始让 TRAE 帮我搭建扩展骨架——manifest.json 配置、content script 注入、popup 面板。最初识别模式只能识别单个文本段落，我反馈「在论坛页面上无法区分发帖人和评论」，TRAE 帮我引入了内容密度算法：从点击位置向上遍历 DOM，找到包含 ≥2 个内容元素的祖先节点作为识别边界。这个算法让识别从「单段落」升级为「内容块」。
3587068320290864:822e6abc9acc3732116cc5f89646642a_6a3107ba0f82d4726d836972.6a3107ba0f82d4726d836975.6a3107ba0f82d4726d836973:TRAE Work CN.0.1.19.no_sid.no_ppe.T(2026/6/16 16:22:18)
3587068320290864:670ac8ed43023d484ed10b3102834a61_6a3107ba0f82d4726d836972.6a31113f2e9dad1875f67596.6a31113f2e9dad1875f67594:TRAE Work CN.0.1.19.no_sid.no_ppe.T(2026/6/16 17:02:55)
任务二：实现多格式解析与 AI 平台集成
任务目标： 把识别到的内容解析为 Markdown / HTML / 结构树 / JSON，并接入 DeepSeek / 豆包 / ChatGPT 一键跳转。
与 TRAE 协作：
这是整个项目最复杂的部分。我先把需求拆成两个子任务：「解析器」和「投递链路」。TRAE 帮我设计了 6 个独立解析器（text-parser、code-parser、table-parser、image-parser、layout-parser、format-converter），用 getter 模式懒加载避免循环依赖。
投递链路遇到一个大坑：跨域图片无法直接通过剪贴板复制给 AI。TRAE 建议用 background service worker 做 CORS-free 图片获取，再转成 Blob 写入剪贴板。我一度担心权限问题（host_permissions: <all_urls> 看起来很强），TRAE 帮我确认了 Manifest V3 的权限模型，最终方案安全可行。
3587068320290864:5731fcfbd913f2acb3496f7fb278c2bd_6a3107ba0f82d4726d836972.6a325a443d24631f8587a297.6a325a443d24631f8587a295:TRAE Work CN.0.1.19.no_sid.no_ppe.T(2026/6/17 16:26:44)
任务三：截图功能与 UI 精细化打磨
任务目标： 实现区域截图、长截图、截图编辑器，并持续优化工具栏和识别精度。
与 TRAE 协作：
截图功能迭代了整整两个 Session。第一次实现后我发现：截图把 ClipFlow 自己的绿色选中框和标签也截进去了，这很荒谬。TRAE 帮我用 setProperty('display', 'none', 'important') 在截图前强制隐藏所有 UI 元素，截图后恢复。
另一个棘手问题是长截图：AI 平台（如 DeepSeek）页面有两个滚动条，自动滚动会卡住。TRAE 参考了 pixpin 的实现思路，帮我调整了滚动策略——优先滚动主内容区，检测滚动到底后停止拼接。
识别精度也在这个阶段大幅提升。我反馈「在论坛页面上识别范围太大，把发帖人和所有评论混在一起了」，TRAE 重构了识别优先级：独立元素（图片/代码块/表格）> 帖子项（单条评论）> 内容块 > 大容器。这样用户既可以精准选中一张图片，也可以选中整段评论流。
3587068320290864:4bb716fdc0b20fe7ba6c735c5d623906_6a3107ba0f82d4726d836972.6a32c586ffc5f17fa8ae6cc7.6a32c586ffc5f17fa8ae6cc5:TRAE Work CN.0.1.19.no_sid.no_ppe.T(2026/6/18 00:04:22)
3587068320290864:360c5eacf6cb37b4304dded203158b50_6a3107ba0f82d4726d836972.6a333c5a52e6e0c6c31e98b6.6a333c5a52e6e0c6c31e98b4:TRAE Work CN.0.1.19.no_sid.no_ppe.T(2026/6/18 08:31:22)
任务四：文本整理工具与最终打磨
任务目标： 在导出编辑器中增加文本整理功能，优化工具栏布局，准备开源发布。
与 TRAE 协作：
用户反馈导出后的内容经常带有分割线、多余空行、不需要的图片。我让 TRAE 在导出编辑器里加了「去除空行」「去除分割线」「去除图片」「正则替换」四个工具，每个都是 DOM 级别的操作，保留 HTML 结构的同时清理内容。
工具栏布局也做了压缩——原本卡片太大，跳转按钮占了一整行。TRAE 帮我把格式选择器移到标题行，跳转按钮和操作按钮放在同一行，整体宽度从 420px 缩到 360px，更紧凑。
最后整理了 .gitignore，排除了开发文档、字体资源、网页版代码等无关文件，只保留扩展本体 + README + LICENSE 推送到 GitHub。
3587068320290864:70090eab66dc3f98e9c561e816a0944e_6a3107ba0f82d4726d836972.6a335acf52e6e0c6c31ea27b.6a335acf52e6e0c6c31ea279:TRAE Work CN.0.1.19.no_sid.no_ppe.T(2026/6/18 10:41:19)
五、效果展示
演示视频：小破站bilibili
100次都是省吃俭用的，大半夜我偷偷排队，不过GLM5.2目前确实好用
们谢谢您！