我做了一个论坛扩展，提升浏览体验，欢迎来测！
最近折腾论坛的时候，总觉得自带的界面在某些操作上不够顺手，比如浏览帖子时的排版、夜间模式的适配或者一些快捷功能的缺失。既然没有现成合心意的，我就想着不如自己动手弄一个。
经过几天的代码打磨，我VC（Verbally Committed/Visual Coding，这里指动手实现）了一个浏览器扩展，专门针对论坛类站点的体验进行了优化。今天把它拿出来晒一晒，算是技术分享，也想听听大家的意见，看看还有没有改进的空间。
为什么做这个扩展？
平时混迹各大技术社区，发现很多论坛虽然内容质量很高，但前端的交互设计往往比较“复古”。举个例子：
图1：开启沉浸阅读模式前后的界面效果对比
- 阅读体验：长贴的排版有时候密密麻麻，缺少行间距和字体优化的细节，看久了眼睛累。
- 操作效率：查看图片、复制代码或者跳转楼层，需要多点好几次鼠标，不够丝滑。
- 视觉干扰：广告或者无关的侧边栏占用了屏幕空间，特别是在小屏幕笔记本上，有效阅读区域很窄。
为了解决这些痛点，这个扩展主要围绕“沉浸式阅读”和“操作加速”两个核心目标来开发。
图2：图片增强查看器支持放大、旋转等便捷操作
核心功能拆解
这个扩展目前版本主要包括以下几个实用功能，大家可以根据需求开启或关闭：
1. 沉浸阅读模式
这是我最满意的功能。开启后，它会自动屏蔽侧边栏和页脚广告，重新调整帖子内容的最大宽度，并根据系统偏好自动应用护眼配色。代码块也会增加“一键复制”按钮，不用再手动选中复制，对摸鱼党（划掉，学习党）非常友好。
2. 图片增强查看器
论坛里经常有图床挂掉或者图片过大的情况。扩展内置了一个简单的图片查看器，支持点击放大、旋转，甚至针对加载失败的图片尝试自动寻找缓存源（如果站点有的话）。这就避免了看教程时“有图但看不清”的尴尬。
3. 楼层直达与引用优化
在长楼中回复时，经常需要引用某几层的内容。扩展增加了一个“引用高亮”功能，点击引用链接会自动平滑滚动到目标楼层，并闪烁提示，让你清楚知道是指谁说的。
4. 自定义快捷键
为了键盘党能彻底丢掉鼠标，我映射了几个快捷键（例如 J/K 上下翻楼层，R 快速回复）。所有快捷键都支持在设置页自定义，防止和浏览器原生快捷键冲突。
技术实现思路
技术上，这个扩展主要用了常规的 Manifest V3 架构。
- Content Scripts：核心的DOM操作都在这里完成。为了性能考虑，我使用了
MutationObserver来监听论坛的动态加载（比如很多论坛现在用Ajax翻页），确保新加载的帖子也能被立刻应用优化，而不是每次翻页都要刷新页面。 - Service Worker：用来处理一些全局的配置同步，比如将你的屏蔽列表保存在本地存储中，跨标签页共享状态。
开发过程中遇到的一个坑是不同论坛的HTML结构差异很大。为了解决这个问题，我写了一个通用的适配器模式，针对不同站点配置不同的解析规则。如果你想给其他站点写适配，也只需要在配置文件里加几行正则表达式和CSS选择器即可。
怎么用？
目前扩展已经打包好，支持 Chrome、Edge 以及基于 Chromium 的浏览器。
- 下载扩展包（
.crx或解压后的文件夹）。 - 打开浏览器的扩展管理页面（
chrome://extensions/）。 - 开启“开发者模式”，点击“加载已解压的扩展程序”，选择文件夹即可。
后续计划与求助
这只是一个初级版本（MVP），我知道肯定还有不少Bug或者未考虑到的场景。比如在移动端浏览器的兼容性我还没来得及测，可能还有布局错乱的问题。
欢迎大家在测试过程中反馈任何问题，哪怕是像素级的UI建议。如果有大佬想一起维护，我也非常欢迎提交PR，一起把它做大做强。
如果你有特定的论坛痛点觉得很难受，也可以在评论区留言，说不定下一个版本我就加进去了！
(注：本文不涉及具体商业推广，纯粹技术交流与工具分享。)
评论已关闭