随学随用实例:Stylish —— 浏览器插件

其实你已经学了不少东西了…… Atom 编辑器、HTML、CSS、git…… 学到的东西得用起来,不然不划算,是不是?

先给浏览器安装一个插件:Stylish,它支持各种浏览器,Safari, Chrome, Firefox 等等。

用它来做什么呢?它可以让你“粗暴地”定制你所浏览的网站的样式…… 比如,这些天我在翻 vuejs —— 一个特别有趣的前端框架;可问题在于,它的页面字体设置得太小(尤其是在 iMac 的大屏幕上看的时候),乃至于读起来很费劲…… 那怎么办?用 Stylish 呗。

以下示例中,我是用的是 Google Chrome,其它的浏览器可能有细节上的不同……

安装 Stylish 之后,浏览器上地址栏边上应该有个小按钮:

打开需要定制的网页之后,点那个按钮,可以开始定制此处的样式:

  1. 在左侧顶部的输入框里给设定的样式随便取个名字: Vue_Readable;
  2. 在其下面勾选Enabled;
  3. 右侧底部,“Applies to” 添加了两条:
    • URLs on the domain: vuejs.org
    • URLs on the domain: vuejs.org.cn
  4. 然后在代码框里输入以下代码即可:
1
2
3
4
body {
font-size: 20px;
font-family: 'Open Sans';
}

当然你还可以定制其它的部分。粗暴的方式就是,不管什么元素,发现改了不管用的话就加上 !important……

我打赌你一定会忍不住不停地给你常去的网站写 Stylish 定制 CSS…… 别太上瘾了,别浪费太多时间。

动动脑子,你会发现你甚至可以修改 Stylish 自身的编辑页面 —— 比如,我还是同样嫌它字体太小,代码输入区域显示的行数太少……

  1. 在浏览器显示 Stylish 编辑器的时候,再点击 Stylish 按钮,
  2. 在左侧顶部的输入框里给设定的样式随便取个名字,比如:Stylish
  3. 在其下面勾选Enabled
  4. 右侧底部,“Applies to” 添加一条:
    • URLs matching the regexp: chrome-extension.*edit\.html.*
  5. 然后在代码框里输入以下代码即可:
1
2
3
4
5
.CodeMirror {
font-family: 'Courier New';
font-size: 18px;
height: 600px !important;
}

等等,“你怎么知道要改的是 .CodeMirror 元素?” —— 之前的教程里用过的啊, 用组合键 ⌥⌘I 能在浏览器中呼出 Inspector, 自己找呗……

然后,你的 Stylish 编辑页面大抵上就是这样的了:

总之就是,学会哪怕一点点东西,你就可以做很多你自己以前完全没办法做的事情,若是不停地学呢?

人们各自就是活在同一个世界的不同版本之中,各自相距天壤。

哪怕是昨天的你和现在的你,也可能如此。

另外,这才折腾几下啊?这才学了多点东西啊?可你就是能明显地、深刻滴感觉到一个事实:

你和那些没折腾过的人在这方面完全无法沟通了…… 因为你们已经不在一个频道上了。

更残酷一点的说法是:

今天的你一个月前的你 若是两个人的话,那么你们俩就是完全无法沟通的……

你明白学习的作用了吧?学习的好处和不学习的坏处,实在是太明显太残酷了。按照脑科学家们的说法,经过接二连三的折腾,你的大脑结构都已经发生了不可逆的变化……

哦,对了,你已经第二次看到正则表达式了(chrome-extension.*edit\.html.*),估计挺好奇的罢?自己找教程去看,Regular Expression…… 先撞撞墙,也不是什么坏事儿。