已访问过的链接染色脚本

前言

我算是一个互联网时代的遗老，到现在还会经常浏览一些论坛性质的网站

这些网站的特点就是没有推荐系统，会优先显示最近被回复的帖子

而且不像有推荐系统的应用（比如小红书），一个帖子被你看过之后不会再给你推送，在论坛上，被看过的帖子并不会有明显的标记，下次你再看到，有可能还会点进去，或者需要花时间花精力决策是否要再点进去

这个是否要再点进去的决策花的精力可能非常有限，但是每天如果你要做上百次甚至上千次这样的决策的时候，这样的精力花费就不太可以接受了

如果我还在学生时期，可能会觉得刷一刷这样的论坛无所谓，但是我现在已经上班了，对于每一点浪费时间和精力的事情就深恶痛绝，如果我已经看过一个帖子，并且大概率不会再点进去，那我就应该对这个帖子做出一个明显的标记

其实浏览器是有类似的功能的，比如 CSS 中的 a:visited. 但是出于某些安全和隐私考虑，浏览器对于 a:visited 的支持非常不好

于是我就产生了一个想法，利用油猴脚本把浏览过的帖子在本地记录下来，并且对这些浏览过的帖子记录进行匹配和染色，比如把已经看过的帖子染成透明，这样就不需要再关注已经看过的帖子了

原理并不复杂，首先在点击链接的时候把被点击的链接记录下来

然后再进到某个页面的时候，对这些页面中所有的超链接进行检测。如果发现某个链接已经被记录过，就给这个链接加上类名，并且这个类名对应一个染色的样式，这样看过的帖子就可以直接被透明色过滤掉了

其实我是更熟悉最新版的 React 技术栈和 Vue 2 的，但是我并不是专业前端出身，但在工作上可能会需要用到更好的前端技术，于是这次特地选择了自己之前很不了解的 Vue 3 和 Element Plus 来做

这里还有一个有意思的点，这个油猴脚本为了样式和所在网站的样式隔离，选择了使用 shadow DOM 来隔离样式。这在几个月前我还觉得这是个冷僻选择，这次被迫使用了，本以为将来不再会用到

但是就在工作中，又遇到了需要封装一个底部导航栏的需求，因为这个导航栏需要在 Vue 2.7 + Vite, Vue 2.6 + Webpack 的混合项目中使用，所以这个工作上的需求又用上了 shadow DOM 和 web components 来封装组件

这还是很神奇的，一个之前用过的技术在未来突然被激发了一下，如果我之前没有写这个脚本，可能根本不会想到这个操作，或者需要被 AI 提示后，再花很多时间学习相关内容才知道该这么做

查看 GitHub 上的提交记录，这个项目大概花了 6 个月，这是我做之前怎么也不会想到的，因为这个原理很简单，当时想，1 个月怎么也做完了，结果花了半年

固然有技术选型迁移的因素，我最初用的是 JavaScript 实现核心逻辑，图形界面用的是纯 HTML + CSS 实现，也没什么可以设置的空间

后来才迁移到 TypeScript 实现核心逻辑，用 Vue 做图形界面，并且加上了很多可以设置的选项，图形设置界面画的时间，远比实现核心逻辑要多

很多时间，只有开发进去才能发现更多困难，所以不仅是这个项目，在自己做了几个小项目后，才知道很多事不像看上去那么简单，more is different

这次也大规模使用了 AI，可能有一半的代码是 cursor, copilot, claude code 帮我写的

这次发现了一个问题，如果让 AI 开始写，一定自己要对这个项目的结构有很深的把握，并且需要 review AI 的代码，不然就会飞速堆屎山，堆到最后你和 AI 都无法维护

不要想着先实现功能，然后让 AI 优化，AI 很多时候无法发现架构上问题，只能修正一些局部的写法，在整个项目写完后，我又回头看，明显发现很多不合理的写法

这还只是个小几千行的小项目，AI 都这么坑，更别说那些动辄几万行的大项目了

AI 还无法发现一些不常见写法之间的联系，虽然它知道在 Shadow DOM 里使用 style scoped 没有用，在 CLAUDE.md 里已经标明了这是一个 Shadow DOM 项目，但还是在狂写 style scoped 的样式，只能说 AI 的上下文理解还是不如一个有经验的开发者

至少在 2025 年上半年的开发中，Gemini 2.5 Pro、Claude 4 Sonnet、o3 还都有一些不尽如人意的地方

AI 只能辅助，没法大幅度超越使用者本身的能力，节约时间可以，但是把核心工作交给 AI 并且不做好设计和 review，项目会非常难维护

这次写完之后，在 V2EX 和 linux.do 这两个论坛都发了帖子，但是响应者不是很多， GitHub 上只增加了 3 个 stars

就是说，有一个东西，开发者本人可能觉得直击痛点，但是这个需求并不一定是大多数人的需求

不过我觉得也还好，至少这个东西我自己在用，并且确实好用，也是业余时间做了点东西，亏肯定是不亏的

如果你有兴趣，可以试用一下：https://github.com/chesha1/color-visited

前端