强迫症福音:三款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

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

开启收费主题

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

  • 发表于:
  • 原文链接https://kuaibao.qq.com/s/20180818G0J8S100?refer=cp_1026
  • 腾讯「云+社区」是腾讯内容开放平台帐号(企鹅号)传播渠道之一,根据《腾讯内容开放平台服务协议》转载发布内容。

扫码关注云+社区

领取腾讯云代金券