【Code With SOLO】用 SOLO 写一个头条正文评论提取浏览器插件
摘要
用 TRAE SOLO 开发了一个 Chrome 浏览器插件，解决了今日头条文章/视频评论抓取太麻烦的问题。插件通过 API 方式智能提取正文及全部评论（含回复），支持 MD 和 CSV 双格式导出，还有半透明科技感悬浮窗一键抓取，用起来非常方便。
背景
前几天在今日头条上看到一篇深度文章，评论区讨论非常精彩，想把评论保存下来做分析。结果发现头条的评论是动态加载的，传统复制粘贴根本搞不定，手动一页页翻更是痛苦。就想试试看能不能用 SOLO 快速做一个浏览器插件，直接一键抓取所有评论并导出。
实践过程
第一步：搭建插件框架
我先在 SOLO 里打开工作区，告诉它我要写一个 Chrome 浏览器插件，功能是提取头条文章和视频的正文内容及评论，支持 MD 和 CSV 导出。SOLO 很快理解了需求，直接生成了插件的五个核心文件：
-
manifest.json— Manifest V3 配置，声明权限和内容脚本匹配规则 -
content.js— 内容脚本，注入头条页面执行抓取 -
popup.html— Popup UI，玻璃拟态风格界面 -
popup.js— Popup 交互逻辑和导出功能 -
background.js— Service Worker，消息中转和后台抓取
我先检查了 manifest.json，配置了 activeTab、scripting、tabs 权限和 host_permissions 匹配头条域名，看起来没问题。然后看 content.js，它已经写了基本的 DOM 抓取逻辑，能提取标题、作者、正文内容。
第二步：踩到第一个大坑——评论抓取为空
插件框架搭好后，我兴冲冲地打开一篇头条文章测试，结果评论数量显示 0 条！仔细一看，content.js 里用的是 DOM 选择器（.comment-item、.ttp-comment-item）来查找评论元素，但头条页面上根本就没有这些 DOM 节点。
关键发现： 今日头条的评论不是通过 DOM 渲染的，而是通过后端 API 动态加载。页面上看到的评论，实际上是 JavaScript 调用 API 获取数据后动态渲染的。所以用 DOM 选择器根本找不到评论元素。
我让 SOLO 分析了头条页面的网络请求，发现了评论 API 的端点：
https://www.toutiao.com/article/v4/tab_comments/
?aid=24
&app_name=toutiao_web
&offset=0
&count=20
&group_id={文章ID}
&item_id={文章ID}
于是彻底重写了 content.js，改用 API 抓取方式，并设计了三层降级策略：
第1层：主API → /article/v4/tab_comments/ （最可靠）
第2层：备用API → /api/comment/list/ （兼容旧版）
第3层：DOM提取 → 从页面DOM查找评论元素 （兜底方案）
API 响应结构也很清晰：
{
"data": [
{
"comment": {
"user_name": "用户名",
"text": "评论内容",
"create_time": 1778040742,
"digg_count": 5,
"reply_count": 2
}
}
],
"has_more": 1
}
改完后重新测试，评论终于能正常抓取了！
第三步：评论回复抓取
评论能抓到了，但每条评论后面的回复还没有。头条的回复需要单独的 API 请求，在评论列表 API 的基础上追加 comment_id 参数：
/article/v4/tab_comments/?...&comment_id={评论ID}
我让 SOLO 新增了 fetchAllReplies() 函数，遍历所有有回复的评论，逐条调用 API 获取回复内容。为了不影响性能，每条回复请求之间加了 300~500ms 的随机延迟，避免触发反爬。
第四步：悬浮窗——半透明科技感
用户要求一个半透明、科技感、可拖拽的悬浮按钮。SOLO 实现了一个 Glassmorphism 风格的圆形悬浮窗：
-
半透明毛玻璃：
background: rgba(108,92,231,0.35)+backdrop-filter: blur(16px) -
SVG 环形进度条：抓取时在按钮上显示环形进度动画
-
可拖拽：鼠标按住拖动，松手后点击触发功能
-
弹出面板：点击悬浮按钮弹出操作面板，包含统计、进度、导出按钮
-
状态动画：
待机 → 
抓取中(旋转) → 
完成(变色)
第五步：MD导出精简
用户要求导出的评论只保留内容本身，干净整洁。我把 MD 格式从：
### 1. 用户名
评论内容
*🕐 时间 · 👍 5 · 💬 3条回复*
精简为：
评论内容
回复内容
---
只保留纯文本内容，评论之间用 --- 分割线隔开，干净整洁。
第六步：打包发布
最后需要把插件打包为可直接安装的格式。Chrome 从版本 73 起已禁止安装商店外的 .crx 文件，所以正确做法是打包为 .zip，通过「加载已解压的扩展程序」安装。
我让 SOLO 精简了 manifest.json 的权限（移除未使用的 downloads 和 storage），新增 host_permissions 确保 API 请求不被 CORS 阻止，然后用 PowerShell 的 Compress-Archive 打包。
最终功能
这个插件最终实现了这些功能：
| 功能 | 说明 |
|---|---|
| API 智能抓取 | 三层降级策略（主API → 备用API → DOM提取），确保评论抓取成功率 |
| 评论回复完整抓取 | 递归获取每条评论的所有回复内容 |
| 半透明悬浮窗 | Glassmorphism 风格，SVG 环形进度条，可拖拽，点击弹出操作面板 |
| 双格式导出 | Markdown（干净整洁，纯内容+分割线）和 CSV（含完整元信息） |
| 自动下载 | 悬浮窗抓取完成后自动触发 MD + CSV 双文件下载 |
| Popup 控制面板 | 玻璃拟态深色主题，实时进度条，统计卡片 |
| 暂停/继续/停止 | 完整的抓取生命周期控制 |
效果与总结
用 SOLO 开发这个插件的过程非常顺畅，主要有几个感触：
1. 快速搭建架构：SOLO 一开始就生成了完整的 Manifest V3 插件框架，包括所有必要文件和基础逻辑，省去了查文档的时间。
2. 关键问题定位：评论抓取为空这个问题，SOLO 分析了页面网络请求后很快定位到了 API 端点，并提出了三层降级策略，这个思路比我预想的更完善。
3. 迭代式开发：先搭架子 → 测试发现问题 → 修复 → 再测试 → 优化 UI，这个流程和 SOLO 配合得很好。每次只改一个点，改完就测，不容易出大问题。
4. UI 生成能力：悬浮窗的 Glassmorphism 风格、SVG 环形进度条、弹出面板这些，SOLO 都能直接生成可用的代码，不需要我手动调 CSS。
总结一点经验：用 AI 开发浏览器插件，最关键的是把需求拆清楚。像这个项目，"抓取评论"这个需求其实包含了好几个层次：DOM 抓取 vs API 抓取、主评论 vs 回复、分页加载、反爬策略等。把每个层次的需求和约束条件告诉 AI，它就能给出更精准的方案。