Chrome 插件开发:隐藏世界杯比分

前言

我没有开发过 Chrome 插件，这是我第一次使用 AI 进行开发。

最近在看世界杯，当然没有精力看直播。那么如何避免知道比分看回放呢？

记得多年前看世界杯，曾经找到过直播的地址，第二天早上直接刷新就可以看，也不会看到比分。今年小红书有世界杯直播，而且高清。这是直播回放账号页面：

https://www.xiaohongshu.com/user/profile/6a212ef4000000000103ec00?xsec_token=ABfo5-dVvpsYlLSY775j6LmqvXy9zyCl9Jfy6tCrF8McA=&xsec_source=pc_note&tab=note&subTab=note

所有的比赛回放都可以在这个页面查看，于是我想着能否开发一个浏览器插件，隐藏比赛的结果信息，做到在打开视频播放之前不会看到比分等结果。

过程

于是开始 vibe coding。

先是用 Codex：

上来就是 8 个文件：

按照插件的安装方法：

打开：chrome://extensions/

打开开发者模式

加载未打包的扩展程序：

每次修改刷新扩展程序

但是没有生效，于是又有几轮对话：

经过几轮对话，问题还没改完，token 已经用完了。。。

但是，想着我的需求很简单，至少可以从简单隐藏标题比分开始，为什么 Codex 搞的这么麻烦。

于是想着用 cursor 试下。好久没用 cursor 了，试着升级一下，没想到 cursor 现在是类似 Codex App 的界面，直接一个对话框：

输入需求之后，第一轮对话，只给出了一个 content.js（除了 manifest.json），我感觉这次靠谱了。

然后第二轮隐藏了列表中的 cover 图片：

后续处理：

弹窗中的信息隐藏

弹窗评论的直接隐藏

视频进度时间被当成比分替换了

视频 poster 的剧透问题

效果

列表页，隐藏标题比分、poster 图片模糊：

弹窗隐藏描述、猜你想搜、评论什么的：

最难搞的是，打开弹窗，视频的 poster 怎么都隐藏不掉，而这个 poster 基本上都是比赛结果的关键信息。即使一闪而过，也有影响。于是在打开弹窗时直接短暂遮挡。

简单粗暴的直接 loading：

3s 结束才会显示弹窗视频播放。

总结

应该是我一开始在 Codex 中需求过于大而模糊，于是模型就给出了通用代码。那时我还没确定用小红书的回放页面进行实现。

而在 cursor 中我一开始就给出了小红书回放页面地址。而 cursor 根据地址读取源码分析也相当到位。