强迫症福音：三款Chrome扩展推荐

本文用到以下Chrome扩展程序：

1. AdBlock

2. Stylus

3. Tampermonkey

前几天看到一篇关于纠正指法的文章，推荐了一个打字练习的网站typingclub.com

练习页

结果页

整体感受不错：循序渐进的练习课程，穿插着一些小游戏和延伸知识短片，界面简洁美观，支持丰富的自定义选项（主题、字体、字号、虚拟键盘样式、语音提示等）。美中不足的是巨大的广告让人感到不适。

这倒容易，用 AdBlock 扩展，在页面上“右键 - AdBlock - 屏蔽这个页面上的广告”就可以轻松搞定：

AdBlock 设置

清理完广告，顺带用 AdBlock 把结果页中的星级评分一并去掉了。占据近1/3的屏幕，却没有任何有效信息，夸张的评分动画还会分散注意力。

现在整个世界都清静了：

AdBlock - 练习页

AdBlock - 结果页

如此使用了一段时间之后，发现了频率最高的场景：“完成练习→自动跳转到结果页→查看统计数据→返回再次练习”，如此反复。

起初用鼠标滚轮翻页看统计数据，然后点击重新开始按钮回到练习页。后来觉得每次把手从键盘移到鼠标上太麻烦，就用PageUp/Down翻页，Alt + ←返回。再后来连PageUp/Down都懒得去按。

为什么不把去掉星级评分之后的空白区域利用起来？这样就不用翻页就能看到更多统计信息了。

先做个尝试：Ctrl+Shift+I 打开 Chrome 的 DevTools，借助自动高亮，快速地找到需要改变位置的元素，然后修改右侧 CSS 样式中的属性：

通过修改 top 和 margin 属性，试探了几个数值，成功压缩了空白区域。

用同样的方法，又修改了 Review Performance 字符的背景色，使得按错的键位更加醒目。找到字符元素及其对应的 CSS 样式，修改 background 属性：

修改CSS之后的结果页

修改了 CSS 之后，按错的键位一目了然，页面的利用率也大大提升，无需滚动屏幕即可显示更多有用信息。

问题来了：手动修改的 CSS 代码会随着页面刷新而失效，有没有什么扩展程序可以永久修改页面的 CSS？搜了一下，还真有，Stylish。其原理就是修改/替换网页的 CSS，使之按照用户编写的 CSS 样式呈现。遗憾的是，这款扩展程序因为收集用户隐私，被 Chrome 应用商店下架了。几经周折，找到个替代扩展程序：Stylus，功能相同，兼容 Stylish。

赶紧安装尝试一下，把刚刚修改过的 CSS 拷贝进去，设置域名规则匹配前缀如图：

Stylus 设置

刷新一下，就是我要的效果，再也不需要翻页了，舒服。对我这种懒到极致的人来说，这个改动减少不必要的手部移动，使反复练习的流程更加顺畅，提高效率。

当然 Stylus 的能耐远不止如此。在https://userstyles.org/上，可以安装很多大神分享的 CSS 样式，针对百度、微博、淘宝、斗鱼、知乎、Google、YouTube等。我安装了轻百度样式，Material Design 风格，同时还去掉了大部分无用信息，包括推广链接。

Stylus - 轻百度

Stylus - 轻百度

One more thing...

typingclub.com提供了多款主题，其中包括两款收费的夜间主题。开启 DevTools 切换主题会自动高亮发生变化的部分。不难发现，收费主题和免费主题一样，都是通过修改来实现的：

理论上用 Stylus 替换全部的 CSS 是可行的，但直觉告诉我要修改的部分应该是 HTML 而不该是 CSS。

在 DevTools 的 Network 标签页下可以看到页面加载过程中，服务器返回包含个性化设置的信息（/api/v1.1/student/me/），用于最终页面的渲染。因此倾向于页面加载完，执行一段 JavaScript 重新设置的 class。

这让我想到了著名的用户脚本管理器油猴（Tampermonkey）。

用户脚本是一段代码，它们能够优化您的网页浏览体验。安装之后，有些脚本能为网站添加新的功能，有些能使网站的界面更加易用，有些则能隐藏网站上烦人的部分内容。

greasyfork.org

坦率地讲，之前没看过，更没写过油猴脚本。边搜边蒙，经历多次失败，终于写下了两行能工作的代码。第二行的作用是在界面任意位置点击，切换到另一种收费主题。

开启收费主题

去了广告，改了页面布局和配色，还用上了收费主题，这下终于舒坦了。