用 Trae SOLO 半天写了个浏览器插件,支持采集并导出抖音和小红书内容及评论

前言 上周在GitHub上一个BettaFish项目很火,再次看到MindSpider项目,以及之前看到的MediaCrawler项目,支持采集多个热门社交平台的相关数据,我将BettaFish在一台老MAC上部署跑起来了(主要逻辑就是在不同渠道不停的搜负面词语。不过针对数据量少的关键字效果一般,只要出现一点错误就会被无限放大),MindSpider & MediaCrawler实在跑不起来,项目太重,每次playwright调起Chromium都被反爬,尝试修复一段时候后担心账号被封还是放弃了。 回头想想垂直领域直接用浏览器插件就可以搞定,大的舆情监测直接花钱买服务或者API接口。 于是周末我用 Trae SOLO 花了半个下午,撸了一个 Chrome 浏览器插件,核心功能: 抖音 / 小红书 搜索页 和 详情页 均可一键采集 自动识别 一级 与 二级 评论,用 parent_id 关联 导出 CSV(UTF-8 BOM),Excel 直接打开即可透视 全程 0 后端,纯前端离线运行,隐私无上传 下面聊聊技术实现与踩坑。 一、整体架构 ├─ manifest.json // 权限声明 + 注入规则 ├─ content.js // 页面脚本,负责 DOM 解析、数据缓存、CSV 生成 ├─ background.js // 扩展后台,只负责下载文件 ├─ styles.css // 悬浮按钮样式 └─ README.md content 脚本 同时注入 douyin.com 与 xiaohongshu.com,按 hostname 自动路由 用 Map() 做内存数据库,键为 videoId / noteId,值为元数据 + 评论数组 采集完成后调用 chrome.runtime.sendMessage() 把 Blob 传给 background 触发下载 二、核心难点 1. 动态 DOM + 哈希 class 抖音&小红书前端都是 React 同构 + 随机类名,class="HtBH2h0B" 下次就变了。 解法: ...

November 8, 2025 · 2 min · Metawen

用TRAE SOLO完成的第二个企业级项目 - 武汉学校信息网

项目缘起 这是我在国庆期间完成的第二个Vibe项目,前后端代码接近10万行,数据库28张表,全部由我一个人独立完成。 项目起源于一个非常私人的需求:大女儿青云明年就要上小学了,我在查学校、学区、政策时遇到了很多障碍。作为一个技术人,实在无法忍受这种信息不对称和查询困难,于是就有了这个项目。 开发过程很有意思:首先花了几天时间跟GPT反复讨论需求,确定产品方向;然后通过各种AI工具采集整理汇总学校的各种信息,包括对口划片、中/高考成绩、分配生政策等;最后实现了资讯、问答、用户及权限等模块,甚至还做了个排行榜。(BTW:LOGO是用GPT生成)。 老规矩,先上几张图: 项目概述 这是一个面向教育行业的综合信息平台,提供学校信息查询、对口划片、升学政策、排行榜计算等功能。项目采用前后端分离架构,由我一个人独立完成全部开发工作,包括前端30+页面组件、后端20+业务模块、28张数据库表的设计与实现。 技术架构 前端技术栈 框架: React 18 + TypeScript + Vite 路由: React Router v6 状态管理: Zustand UI组件: 自研组件库 SEO优化: React Helmet Async 构建工具: Vite 后端技术栈 运行环境: Node.js + Express 数据库: PostgreSQL 认证授权: JWT + Session双重认证 文件存储: 腾讯云COS对象存储 邮箱服务: 腾讯云邮箱 地图服务: 百度地图API 搜索服务:腾讯云WSA+阿里云IQS AI服务: 阿里云QWEN大模型 前端功能架构 基于React Router的路由架构,实现了完整的前端功能模块: 1. 学校信息模块 graph TD A[首页] --> B[学校信息模块] B --> B1[学校列表] B --> B2[学校详情] B2 --> B2_1[学校概览] B2 --> B2_2[学校简介] B2 --> B2_3[荣誉奖项] B2 --> B2_4[特色项目] B2 --> B2_5[校园风采] B2 --> B2_6[相关资讯和问答] B2 --> B2_7[对口小区和初中] B2 --> B2_8[中考高考成绩] B2 --> B2_9[综合评价] B --> B3[学区查询] B --> B4[学校地图] 2. 排行榜模块 graph TD A[首页] --> C[排行榜模块] C --> C1[小学排行] C --> C2[初中排行] C --> C3[高中排行] 3. 社区问答模块 graph TD A[首页] --> D[问答模块] D --> D1[问答首页] D --> D2[问题详情] D --> D3[提问页面] 4. 文章资讯模块 graph TD A[首页] --> E[文章资讯模块] E --> E1[文章列表] E --> E2[文章详情] E --> E3[文章编辑] E --> E4[文章发布] style E3 fill:#ffcccc style E4 fill:#ffcccc 5. 用户中心模块 graph TD A[首页] --> F[用户中心模块] F --> F1[用户注册] F --> F2[用户登录] F --> F3[用户中心] F --> F4[安全设置] F --> F5[收藏页面] 6. 分配生政策模块 graph TD A[首页] --> G[分配生政策模块] G --> G1[分配生详情] G --> G2[配额管理] style G2 fill:#ffcccc 7. 关系管理模块 graph TD A[首页] --> H[关系管理模块] H --> H1[小区对口关系] H --> H2[初中对口关系] H --> H3[关系操作] style H3 fill:#ffcccc 8. 管理模块 graph TD A[首页] --> I[管理模块] I --> I1[学校管理] I --> I2[地图管理] I --> I3[排名管理] style I1 fill:#ffcccc style I2 fill:#ffcccc style I3 fill:#ffcccc 真实技术难点 1. 腾讯云COS对象存储集成 文件路径: xueapp/routes/photos.js ...

October 10, 2025 · 5 min · Metawen

春节假期,我用字节Trae手搓了一个企业级应用——家庭健康宝

春节假期,deepseek火出了圈。我用字节发布的免费AI编程IDE工具Trae手搓了一个企业级应用——家庭健康宝,前端/后端/数据库/对象存储/大模型一把梭! 用于统一管理家人病历、检验单、药品、保单、体检、身高等各种健康数据。支持文件阅览及OCR智能解析;接入阿里千问大模型,可以将健康数据发给大模型咨询;累计的健康数据可以生成趋势图表;同时支持全文检索;还有未来健康事件的提醒功能。 家庭健康宝思维导图 节前在项目中用cursor体验了一些代码改写的功能,大为震惊。随后字节发布了Trae免费的平替平台,就想着用他来做一个完整的应用程序。 作为两个女儿的奶爸,刚好前几天女儿肺炎来回跑了几个医院,病历/检测报告到处都是,就萌生了做一个家庭健康数据管理的小程序。 前期用ChatGPT、Kimi、Deepseek讨论产品命名、竞品分析、商业计划、模块设计、架构选择等等,可以说绝大多数问题都会先丢给大模型,让他给一些未知的反馈。 而后上手Tare开始编写各种demo验证,虽然有一些前后端编程的经验,但是工作中更多的角色是产品经理,所以虽然有AI加持还是遇到了一些坎坷,不过从过去做互联网产品的经验来说,就没有过不了的坎。 首页摘要 健康数据 提醒 全文搜索 健康数据趋势 智能助手 火炉旁、汽车上、婚礼中都在与Trae亲密沟通协作,下达指令立马专业反馈执行,磨合后效率不断提升,其实它什么都知道,如果你没得到正确的答案真的可能是你没问对。最终在春节假期里一个人零投入完成了一个算得上是企业级的小程序,我想过去至少5人团队要做3个月。 后端工程 前端工程 后端数据库 这几天抽空填充了一些数据,整体UI还过得去,先自用一段时间,后续再考虑是否发布出来。另外我还有几个其他产品的想法,得益于AI的神力,我想这些珍贵的idea都能快速实现,这个世界正在被重新制造。

February 7, 2025 · 1 min · Metawen