大家好，我是邦。
2026世界杯小组赛已经开打了，作为一个资深球迷+前端开发者，我最近做了一个小工具，想跟大家分享一下开发过程和思路。
背景：一个前端开发的世界杯焦虑
先说下背景。我是一个前端开发，平时写React和Node.js。同时我也是个资深球迷，世界杯每届都看。
2026世界杯在美加墨举办，时差对我们国内观众来说非常不友好。大量比赛在北京时间凌晨1-4点，熬夜看不现实。
我的想法是：第二天早上看回放。
但问题来了------第二天看回放，你一定会被剧透。朋友圈、微博、新闻推送，到处都是比分和结果。还没点开视频，你就已经知道几比几了。
这种感觉很难受。
为什么现有方案不行？
我调研了一下现有的解决方案，发现都不太好用：
方案A：卸载APP、退微博、不看朋友圈
不现实。你不可能完全与世隔绝。
方案B：让朋友别剧透你
更不现实。
方案C：用广告拦截器自定义规则
技术可行，但太复杂了。每个网站要单独写CSS/JS规则，而且网站一改版规则就失效。
方案D：专门做一个工具
这个方向是对的，但我没找到现成的好用的。
于是我决定自己做一个
功能需求很明确：
- 打开回放页面 → 自动隐藏比分、进球、结果
- 评论区剧透内容 → 自动折叠
- 支持多端：浏览器插件 + 安卓APP + Windows客户端
- 支持平台：小红书 + 央视CCTV
技术选型：
- 浏览器插件（Chrome Extension MV3）：主流浏览器都支持
- 安卓APK（WebView封装）：打开就是无剧透观赛页面
- Windows EXE（Edge WebView2）：独立客户端，双击运行
开发过程（踩了哪些坑）
坑1：不同平台的DOM结构完全不同
小红书和央视CCTV.com------两个网站的HTML结构完全不一样。
解决方案：配置化的规则引擎。
interface PlatformRule {
name: string;
matchPattern: string;
scoreSelector: string;
goalSelector: string;
commentSelector: string;
}每个平台一个规则，工具自动匹配。
坑2：动态内容加载
SPA架构，内容动态加载，MutationObserver解决。
坑3：多端打包
浏览器插件搞定了，但用户说"我手机上也想用""我办公室电脑不能装插件"......
于是加了安卓APK和Windows EXE两个版本。安卓用WebView封装，Windows用Edge WebView2。
坑4：用AI辅助开发
大量代码是AI帮我写的。样板代码、技术问题解决、代码审查------AI真的能提效。
但架构决策还是要自己来。
最终效果
拿2026世界杯已经打完的几场小组赛做测试。
装上工具打开回放：比分隐藏、进球提示隐藏、评论区剧透折叠。
看比赛，80分钟还是1:1，然后点球大战！心跳加速了。
看完查结果：确实1:1拖到点球。完整体验了。
开源与分享
工具已经放到官网了：scgs.tv
三种版本都有，免费下载。代码没有开源（还没整理好），后续可能会考虑。
写在最后
前端开发者的价值是什么？不是会多少框架，而是能用技术解决真实的问题。
世界杯回放被剧透，这是一个真实的问题。我用自己会的技术解决了，并且分享出来------我觉得这就是技术的意义。
我是邦，前端开发，业余做点有趣的小工具。
*世界杯工具官网：scgs.tv