ZH CEXO's BLOG » Toolkit

GM脚本：Simple Google Reader Style V1.3

ZH CEXO — Wed, 30 Nov 2011 11:38:03 +0000

Google Reader风格来了一次大转变，然后这个脚本就失效了，也已经有朋友向我反应脚本没用了的问题，无奈我一直没有什么时间。今天下午做完了自己的任务之后，偷闲了一下，简单看了一下Google Reader的新界面，结果就把这个脚本整了出来。谢谢大家的支持啊！先上一张总效果的图：

虽然GM脚本很强大，但也只能基于新GR的版面来改，要想改得面目全非，除了需要技术，还需要时间，而这两种东西我现在都没有= =。做成原来版面的效果基本上不可能了，但我还是按着自己觉得舒服的方式改动了一下。

大红色的订阅按钮我把它放到搜索框的右边了，另外，导航栏里面的常用链接，我把它也放到搜索框右边的“常用的链接”那一项里面了。再者，把阅读文章时候，功能区的高度缩小了，用来扩大阅读区的视野。

最后，还是把字体改成了雅黑，字号改成16px，行距为两倍行距。至于长行短行切换的问题，脚本自动更新的问题，顶部导航条怎么处理，这个版本里都没有，抱歉了各位。。。

点击此处下载此脚本

とあるcnbeta的脚本

ZH CEXO — Wed, 13 Apr 2011 08:09:43 +0000

之前放出两个脚本，里面有一个是改造cnBeta用的，大体上是模仿了QQ阅读的设计，简单的弄了下，因为想到的是由自己专用，不过后来还是放了出来。今天想到了这个，又忍不住来鼓捣一下。之前的版本叫0.2 beta，那这次就放出1.0正式版吧。

话说cnBeta的设计还是很简洁大方的，非常适合新闻阅读，不过考虑到网站运营方面的问题，它的广告越来越多，有点惹人厌。用火狐的朋友们可能会装adblock plus这样的扩展，但它去广告并不彻底，并且去掉的地方就留下了个空位。所以我在想，何不试试用脚本来还原一下cnBeta本来的设计意图呢？那么就动手弄吧！

效果图如下：

需要注意的问题：

声明一下，不是跟cnBeta作对，只是想使用上方便一些
之前的脚本在显示热门评论上可能有些问题，这个脚本也没有基于之前的脚本来改，相当于重写了
随着Greasemonkey脚本常驻于浏览器，每次随着目的网页打开而自动做修改^[1]，所以它并不是阻止了广告的加载，而是加载完后再从DOM中去掉，所以基本上它不会对cnBeta的载入有影响
需要使用的朋友们请低调，原因在这里

点击这里下载脚本

[1] 请参见维基百科的Greasemonkey条目

这回整优酷了，脚本脚本

ZH CEXO — Thu, 20 Jan 2011 03:09:46 +0000

为了熟悉JS，也算是练手，所以这段时间写脚本玩玩的，这不，优酷的脚本也整出来了。

优酷的这个脚本有什么用呢？我来解释一下。优酷以前看视频的时候是没有关灯功能的不是，然后如果长时间在优酷上看视频（比如连续剧、动画片啥的），眼睛就会非常难受不说，而且你想想，总是这么白着屏，费电吧，哈哈~我以前解决的方法就是，用Firebug把背景色改成黑色的。然后现在，优酷已经有关灯和小窗口播放功能了，不过这关灯的确是把背景色变成了纯黑，时间长了依然难受，所以我就整整这个。

我在关灯的旁边加了个“开启护眼”，这个功能是默认开启的，依然是没技术含量的遮罩。关灯 or 遮罩，你喜欢哪个就用哪个，但最好不要一起用……另外，遮罩开启的时候，右下角会有个亮度调节，点击一下它就可以自定义遮罩的亮度，这样就不会因为屏幕的差异造成眼睛的不适吧，默认的遮罩亮度为纯黑的75%，大家自行试试。

脚本是几天前完成的，没作过宣传，不过居然会有10次安装，不知是哪些好人心哈，谢谢了~

目前脚本的版本是V1.11，具体更新了啥大家在userscripts.org里看吧，不赘述了。

点击此处下载脚本

PS：为啥优酷的代码里面，js和html是混在一起不分离的呢？

再放出两个油猴脚本好了

ZH CEXO — Wed, 12 Jan 2011 11:40:43 +0000

之前放出过两个脚本，一个是把cnBeta的苹果新闻都滤掉的脚本，反响不是很好；另一个是Google Reader界面的改造脚本，马马虎虎。这次我再放出两个。

一、cnBeta新闻界面的改装脚本

这个大家试试吧，我就不多描述了。如果你觉得不爽，就卸载掉。另外，我并非针对cnBeta，只是为了满足自己的需求。

点击此处下载此脚本

二、Tutorial9.net的自动跳转脚本

Tutorial9.net是我很喜欢的一个关注设计的网站，我的PS就是在上面学习的。之前我偏爱它的原因是，它的内容很精良，讲得很易懂，所有的资源都免费，挺不错的。但是前不久它改版了，与之前相比，最大的变化就是允许用户提交链接了。尽管T9的内容一下就丰富起来，但是自己的阅读器里可就开始没完没了了。我在阅读器里点击一下文章的链接，得先跳到T9的文章页，再点T9文章页上的Visit Link才能访问。本来国内访问国外的站就慢，再这样让我多此一举，所以这个脚本就诞生了，自动跳转。

点击此处下载此脚本

GM脚本：Simple Google Reader Style V1.2

ZH CEXO — Thu, 06 Jan 2011 17:11:33 +0000

好了，关于这个脚本我就不多介绍了，看过我博客的朋友们都了解一二，应该有些人在用吧，ZH我非常感谢各位的支持。原本我以为这个脚本用的人不会很多，有十来个人我就满足了，结果在userscripts.org上面看到，已经被下载91次了，虽然数量也小，但比自己期望的强太多了哇~

进入正题，V1.2版更新了什么呢？其实也没有大的变动，就是按照aQua和Healson两位朋友的意思，改了一下行显示的问题。这一点我得说一下，因为我的电脑是台式机，屏幕是19寸的宽屏，所以这个脚本是按自己的习惯定制的，忽略了用笔记本的朋友们的感受。确实，在屏幕相对较小的笔记本上，阅读区域的正文部分右边空白着总感觉屏幕空间利用得不充分，虽然在大的显示屏上，空着可能视觉上好受一点。

脚本的改动，用下图说明一下

图中用红色的边框圈出来的部分就是这次的改动。默认的情况下正文部分还是窄行显示，所以按钮上的字显示”长行”，表示你点击一下就会切换到长行效果。如果你已经切换成长行显示的效果，那么按钮上的文字就变成了”短行”，表明你点击一下就能切换回短行。

几点说明：

1、脚本没有加入自动更新的功能，因为我觉得，我看不懂的代码加进去有点对不起自己和大家

2、这次使用了innerHTML的属性，虽然我一般比较喜欢避过它，不过GR的代码太蛋疼了，我省点事，用这个

3、以我目前的水平，这个正文宽度没法自定义，而且显示效果每次进入阅读器时都得手工切换一下，有点麻烦。不过，有总比没有好，大家将就一下，以后我能自由操作cookies的时候，再考虑增加

4、有问题大家继续提，我在能力范围内将继续完善

5、觉得用不着这个功能的朋友们，同样可以选择不升级

其实做这个脚本本来是为了方便自己的，结果就这样放了出来。我制作的原则是：阅读上的体验最佳，也尽量保持GR自身的简洁性。尽管不少人喜欢用仿MAC OS X的脚本，但我觉得，它太华丽了，让人容易专注界面而不是文章本身。我也是从那个脚本切换而来的，就写一个自己觉得好的脚本。

最后，有兴趣的朋友可以看看aQua童鞋和Healson童鞋的提议，再次谢谢他们！

点击此处下载脚本

GM脚本：Simple Google Reader Style V1.1

ZH CEXO — Sun, 19 Dec 2010 13:49:42 +0000

之前有写过一篇文章，《我自定的Google Reader最大化阅读区域的油猴脚本》，不知道大家有没有印象。由于下载是放在自己博客上的，也没做下载统计，所以有多少人在用我也不知道。不过不论有多少人用，哪怕除了我之外只有一个人在用，我也会非常开心。

记得上次更新了文章之后，文章下面的评论里面就有人说，我把顶部的导航菜单去掉了，而有些人还是蛮习惯这些导航菜单的。因为这个脚本是按照我自己的习惯去定义的，所以没考虑那么多情况。不过用了这么久，有时候觉得，缺个导航菜单的确不方便，总要去开书签什么的，没导航来得快，何况我又很依赖Google的各种服务。那么这次，我把脚本更新到1.1版，把导航菜单加进去了，和Google自己的那个不一样，不过也差不多啦，只去掉了“阅读器”这一项嘛~

上一张对比图：

左边是以前1.0版本里面的左边顶部的效果，右边是现在的效果，多了一个”导航菜单”，做成了下拉式的，通过鼠标单击来触发或关闭，和右边的”添加订阅”按钮也不冲突。样式上面，依然保持了统一的风格，希望大家喜欢。

其实不是专门想做这个脚本的，只是因为ZH我并不懂JS，所以1.0版用纯CSS折腾成了那个样子。但是我也一直在学习JS，今天想起来就拿出来演练一下，感觉也不错。我学习JS的过程有点本末倒置，先认识的jQuery，再看JS，囧……不过我感觉，原生JS虽然麻烦一点，但也很好玩哈~

在脚本里面添加菜单的时候，五个项目做了五次重复工作后，发现其实可以用JSON的方法来弄嘛，一个循环就搞定了-,-……我真蠢，不过也算教训，以后会注意的。脚本写得不咋样，所以没写注释，看得懂的感兴趣的看看就明白意思，看不懂的喜欢的话直接用吧，闪~

对了，脚本可以同时工作于Firefox和Google Chrome（我自己的10.0.612.1 dev测试通过）

点击此处下载脚本

更换Firefox默认查看源代码工具的配色方案

ZH CEXO — Tue, 07 Dec 2010 12:52:51 +0000

今天看代码的时候，再一次忍受不了Firefox默认查看工具显示的恶心效果了。显示代码嘛，你好歹用个等宽字体啊，而且那么大一白背景，几个破破烂烂的字体挂着，看着心里烦。本来每次用Firefox默认的查看工具看代码的时候心里都会有这种抱怨，但这一次我终于暴发了，所以Google了一下看看能不能更换一下字体，没想到的是，控制样式的是CSS，那么拿手好戏来了~效果图伺候先：

好吧，我承认我重口味，换了这配色这么重的Monokai……不过我自己蛮喜欢这款配色的，就换上了。然后把这也拿出来分享吧，因为我想可能至少会有那么一个人，和我一样忍受不了默认样式又喜欢Monokai的配色呢？需要说明的问题是：

1、你下载得到的文件叫viewsource.css，然后找到你的Firefox安装文件夹，里面有个叫res的文件夹下，先备份同名文件viewsource.css，然后再用我改的这个覆盖它。

2、由于Firefox默认的查看器里面的样式控制的HTML标签看不到，而且看了下CSS文件后我觉得它能控制的样式也有限，所以这个Monokai样式与其他软件里面正规的Monokai样式不是百分之百相同。

3、这完全是没技术的修改，改了改颜色而已，如果你喜欢，就直接使用我改的，如果你不喜欢，请自行修改颜色即可。

4、推荐使用Yahei Consolas Hybrid字体，它将中文显示为雅黑，英文显示为Consolas。不过如果你的电脑里有Cosolas和微软雅黑两种字体的话，应该也能正常显示字体，因为对于Firefox来说，font-family: “Yahei Consolas Hybrid”, “Consolas”, “Microsoft Yahei”, sans-serif;这句还是有效的吧。

下载链接：viewsource.css | Yahei Consolas Hybrid字体

又到了PS时间了，囧：大家试试用未修改之前的Firefox默认的查看效果去看看CSS禅意花园的网站，为什么代码会显示得那么工整呢？看别的网站的源代码就不会显示成那样的效果。
另外，大家可能会问，看代码用Firebug多方便啊，为什么要用本来这个？我这样说吧，Firebug显示了DHTML的代码，有的时候并不需要……

修正一下jQuery插件Colortip在IE6下面的显示问题

ZH CEXO — Sat, 04 Dec 2010 16:23:37 +0000

今天看到了MK的这篇文章，然后其中的Colortip这个jQuery插件引起了我的注意，倒不是因为它新奇，而是我之前看到过，没想到它就成了2010年最佳之一了……今天又回顾了一下这个插件，然后发现它在IE6下面工作的时候，显示起来是不正常的，tip经常出现在很离谱的位置。问题还有，由于tip的显示效果没有用到任何图像，都是纯的CSS，所以里面用CSS实现的三角形在IE6下是无法工作的，会显示一块有色区域，很丑，所以我就想动手改它一下。先上一张对比图好了：

js方面的代码肯定是没问题的，问题出CSS上，Colortip用的是position进行定位，在IE6下面可能存在着一点问题。而且由于IE6不支持border-color:transparent的属性，所以tip下面的三角形也有问题。下面修正它吧。

打开插件的colortip-1.0-jquery.css这个文件，在里面找到如下代码：

.pointyTip,.pointyTipShadow{
	/* Setting a thick transparent border on a 0x0 div to create a triangle */
	border:6px solid transparent;
	_border:6px solid #123456; /*指定一个特别的颜色值，为使用chroma滤镜作准备*/
	bottom:-12px;
	height:0;
	left:50%;
	margin-left:-6px;
	position:absolute;
	width:0;
	font-size:0; /*IE下空标签会有一个高度，把font-size设为0可以清除这个高度*/
	_filter:chroma(color=#123456); /*为IE6使用chroma滤镜将颜色#123456过滤成透明的*/
}

如果大家自行看一下代码的话，可能会发现我贴出来的代码和原来相比有点不同，但是我已经把注释写在里面了，应该可以理解吧。下面继续：

.pointyTipShadow{
	/* The shadow tip is 1px larger, so it acts as a border to the tip */
	border-width:7px;
	bottom:-14px;
	_bottom:-15px; /*将小三角形的位置微调一下更准确*/
	margin-left:-7px;
}

.colorTipContainer{
	position:relative;
	text-decoration:none !important;
	_zoom:1; /*不知道为什么，这里加上zoom:1后IE6下使用left:50%才能得到正确的位置，难道内联的元素没有layout？无法准确表达……*/
}

好了，到这里就修正完毕了，在我的机器上，用IEtester和VMware虚拟机的XP+IE6都测试通过，你也可以试试效果。有任何问题可以向我反馈，我能改则改。代码好理解，不能理解的直接用插件就行了。

插件网站 | 原版DEMO | 改后DEMO | 修正后的插件下载

再补充一句，原版和改后的DEMO在高级浏览器里面的效果是一样的，没区别，但是用IE6试试就知道了。希望我做的这一点点微不足道的工作，为喜欢这款插件的朋友们带来方便，^_^

关于纯CSS的方法实现三角形的效果，可以参看Mr.Think的这篇文章，很详细很不错的技巧CSS技巧之圆角背景与三角形。

ZH CEXO's BLOG » Toolkit

GM脚本：Simple Google Reader Style V1.3

相关阅读

とあるcnbeta的脚本

相关阅读

这回整优酷了，脚本脚本

相关阅读

再放出两个油猴脚本好了

相关阅读

GM脚本：Simple Google Reader Style V1.2

相关阅读

GM脚本：Simple Google Reader Style V1.1

相关阅读

更换Firefox默认查看源代码工具的配色方案

相关阅读

修正一下jQuery插件Colortip在IE6下面的显示问题

相关阅读