用 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

2天用Kiro写了个资讯聚合程序RSSX,支持网站、API、微信公众号

作为一个专业领域的技术专家,我需要实时了解全面的信息。市面上的RSS工具要么功能复杂臃肿,要么部分需求不支持,最大的问题是不能在同一个平台浏览所有信息源。经过一番调研,我决定用Kiro写一个轻量级的RSS聚合工具。 令人惊喜的是,一个周末就完成了整个系统,并成功同步了近5000篇文章(标题+链接)。这篇文章将详细介绍整体架构和实现的技术难点,展示Kiro在复杂系统开发中的不凡能力。 先放一些截图吧。 Kiro开发界面,可以看到整个项目完成差不多只用了不到 200 Bonus,实际编码时间估计也就1天时间。 Web首页(没有做任何UI调教,自己凑合能用),支持浏览最新资讯,筛选搜索,采集特定文章。 网站管理页面,主要是指定标题、链接、时间的元素。且支持API方式获取,同样配置好JSON匹配规则。 微信公众号管理页面,公众号支持批量导入,图标转存到了腾讯云,否则防盗链无法展示,可以设置同步页数/同步间隔,同时记录了最后同步时间。 还有一个页面主要记录微信管理员cookie,比较简单就不展示了。另外针对部分文章会采集转换成markdown格式存储到本地,图片也做了处理,文章可以正常展示,后续打算基于有价值的文章做一个垂直领域的RAG。 (以下绝大部分直接用Kiro在项目中生成) 系统需求分析 核心需求 多源聚合:支持传统网站RSS、API接口、微信公众号文章 统一管理:在同一个平台浏览和管理所有信息源 智能处理:自动去重、内容清理、图片处理、HTML转Markdown Web界面:提供直观的管理和浏览界面 文章同步:将RSS文章同步到标准化的articles表 高性能:支持大量文章的存储和检索 技术挑战 异构数据源整合:不同平台的数据格式差异巨大 微信反爬虫:微信公众号的访问限制和安全机制 API网站支持:政府部门API接口的调用和数据转换 内容处理:HTML转Markdown、图片上传COS、推广内容清理 数据一致性:避免重复文章,保证数据完整性 性能优化:大量文章的存储和快速检索 多管理员机制:微信账号轮换和频率限制处理 系统架构设计 整体架构 ┌─────────────────┐ ┌─────────────────┐ ┌─────────────────┐ │ 数据采集层 │ │ 数据处理层 │ │ 应用服务层 │ ├─────────────────┤ ├─────────────────┤ ├─────────────────┤ │ • 网站爬虫 │ │ • 内容清理 │ │ • Web管理界面 │ │ • 微信爬虫 │ │ • 图片处理 │ │ • REST API │ │ • API接口 │ │ • 格式转换 │ │ • 文章同步 │ │ • 多管理员轮换 │ │ • HTML转MD │ │ • 一键采集 │ └─────────────────┘ └─────────────────┘ └─────────────────┘ │ │ │ └───────────────────────┼───────────────────────┘ │ ┌─────────────────┐ │ 数据存储层 │ ├─────────────────┤ │ • PostgreSQL │ │ • 腾讯云COS │ │ • 双表结构 │ └─────────────────┘ 数据流架构 原始数据源 → RSS采集表 → 内容处理 → 标准化文章表 → Web展示 ↓ ↓ ↓ ↓ ↓ 网站/API rss_articles 图片上传 articles 用户界面 微信公众号 _list HTML转MD 表 管理后台 核心模块 1. 数据库设计 (database.py) 采用PostgreSQL作为主数据库,设计了双表结构: ...

October 26, 2025 · 3 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