夜雨聆风
我给即刻 Web 做了个 浏览器插件,只为解决一个小烦躁
在即刻 Web 的信息流里刷到一条有意思的动态，想看看评论，结果要点进详情页，看完再返回。
一次两次没什么。一天几十次，节奏碎得不行。
所以我做了一个 Chrome 插件，让评论直接出现在动态卡片下面，不用跳转。
今天聊聊这个插件怎么用、怎么做出来的，以及中间踩了哪些坑。
先看效果：
它能干什么
装上之后，打开即刻 Web 的关注页或者用户主页，滚动浏览时每条动态下面会自动出现评论预览：
- 一级评论默认展示 5 条，点”展开更多”可以继续翻页
- 二级回复自动全量展示，带层级缩进，一眼看清谁在回谁
- 没有评论的动态不会出现空白面板，不占视线
- 去掉了时间戳、点赞数、回复数这些噪音，阅读更干净
- 复用你已有的登录态，不用额外登录，token 过期了自动刷新
看起来简单，做起来全是坑
说实话，最初觉得这事不难——抓个评论接口、往页面里塞个面板，完事。
结果从”能跑”到”稳定”，反反复复改了好几轮。
坑一：接口”找到”不难，接口”用对”难
即刻的评论接口很快就能定位到：comments/listPrimary 拉一级评论，comments/list 拉二级回复。
真正难的是参数语义。primaryCommentId、level、targetType、order、loadMoreKey——这些参数组合错一点，接口照样返回 200，但数据不全。
你以为成功了，其实丢了一半评论。
关键经验：不要只看接口是否 200，要看返回条数是否达到预期。
坑二：二级回复最容易翻车
这是花时间最多的部分。
最开始的逻辑是”主请求失败才走备用方案”。结果遇到一个经典场景：主请求成功返回了 2 条回复，但实际有 4 条。接口没报错，数据就是不全。
后来改成了一种我叫”种子聚合”的策略：同时用多组参数去请求，每组内部还会翻页，所有结果按 ID 去重合并，达到预期条数就停。再把接口返回的热门回复也合进来做补丁。
听起来有点重，但对于非公开接口来说，fallback 不该是”报错才走”，而该是”主动补全”。
坑三：帖子元数据提取不稳定
插件要知道每条动态的 postId 和 type 才能去拉评论。一开始只在 content script 里读 DOM 和 React Fiber，有时候能拿到，有时候拿不到。
后来加了一个 page-bridge.js，直接在页面的 JS 环境里提前把元数据标注到 DOM 的 data-* 属性上，content script 过来直接读就行。
涉及 React 内部结构时，用 page bridge 做”前置标注”比在 content script 里硬读稳定得多。
坑四：Token 刷新要防并发风暴
读 localStorage 里的 token 本身没问题。难点是 401 之后的刷新逻辑——如果多个请求同时触发刷新，会产生请求风暴。
解法是做了一个”单飞刷新”：同一时间只有一个刷新请求在跑，其他请求复用同一个 Promise，等刷新完了再重试。
坑五：SPA 路由切换容易残留
即刻 Web 是 SPA，在关注页和用户主页之间来回切换时，如果不清理之前注入的面板和观察器，就会出现串场——上一页的评论残留在新页面上。
后来做了路由检测和生命周期管理：进入目标页面时启动，离开时清理，才不串场。
在 SPA 上做插件，一定要设计”进入/退出路由”的生命周期。
几个设计决策，回头看做对了
全量展示二级回复，不做”显示更多”按钮。
一开始想做”默认显示 2 条，点击展开”。实现之后发现按钮状态同步很容易出 bug——点了没反应、展开后数据不对。考虑到二级回复通常就几条，直接全量展示，复杂度和 bug 都明显下降。
功能上能简化就简化，稳定性优先。
不用 Service Worker，逻辑全放 content script。
MV3 的 Service Worker 生命周期很短，用它做长时逻辑会增加消息传递的复杂度。这个插件的场景不需要后台常驻，所以全部逻辑都在 content script 里完成，token 也只在内存中使用，不写 chrome.storage。
去掉一切非必要信息。
时间戳、点赞数、回复计数——这些在详情页里是有用的上下文，但在时间线的预览场景下全是噪音。去掉之后，扫描阅读的效率高了很多。
技术架构一句话总结
纯原生 JS，没有任何构建工具和依赖。两个脚本各司其职：
page-bridge.js跑在页面环境，负责提前标注元数据content.js跑在插件环境，负责拉评论、渲染面板、管理生命周期
加上 IntersectionObserver 做懒加载、2 分钟缓存防重复请求、WeakMap/WeakSet 管理状态避免内存泄漏。
一共不到 1400 行代码，零依赖。
怎么安装使用
- 从 GitHub 下载文件，并进行解压，下载地址：https://github.com/huangyunbin/resource/blob/main/okjike-inline-comments.zip
- 打开 Chrome，进入
chrome://extensions - 开启右上角”开发者模式”
- 点”加载已解压的扩展程序”，选择项目目录
- 访问即刻 Web，确保已登录，开始浏览
最后
如果你也在 Web 端用即刻，欢迎试试。
有什么想改进的地方，欢迎评论区留言交流。
