2026-07-27 06:20:33

我用AI辅助做了一个多端工具：解决2026世界杯回放被剧透的问题

大家好，我是邦。

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