47 评论

如何用 GreaseMonkey 扩展 Google Reader

  在说正题之前先插一句:Google 为了强行推广 G+,把 Google 阅读器的社交功能都阉了。今后,大伙儿如果想看俺的分享,除了继续用 Google Reader 订阅俺的博客(俺博客的RSS订阅地址: http://feeds2.feedburner.com/programthink ),还可以在 Google+ 圈养(俺的 G+ 页面: https://plus.google.com/113559088971921339544/ )。

★引子


  话说俺一直是 Google Reader 的重度使用者——从2005年10月至今,俺的阅读数已超过13万。上周 Google 放出风声说要改版,俺还是满心期待的。谁曾想,昨天(11年11月1日)发布的新版本,那界面真是让人大跌眼镜——怎一个"烂"字了得!
不过,抱怨归抱怨,眼下暂时还没有合适的替代品,Google 阅读器还得接着用下去。为了不至于天天面对这么一个恶心的界面,俺发扬"自己动手丰衣足食"的DIY精神,亲自操刀修改阅读器的界面。有兴趣的同学,可以看看俺的经验分享。


★为啥要美化阅读器?


  对于老用户而言,新版的界面简直是惨不忍睹——到处都是多余的空白,显得非常不紧凑。比如:文章的列表界面,间距也太大了。现在一屏能显示的帖子数只有原来的一半。这样一来,大大降低了阅读的效率,浪费的大伙儿的时间。
估计很多网友逆来顺受惯了。不管网站推出多么烂的界面,他们都默默忍受。但是,在当今 Web 盛行的互联网时代,普通用户是完全可以自己操刀修改网站界面滴(而且几乎【不需要】专业技术)!此中之奥妙,在于GreaseMonkey这一大杀器。


★GreaseMonkey 扫盲


◇GreaseMonkey 是啥玩意儿?


  GreaseMonkey 俗称"油猴",官网在"这里",维基百科的介绍在"这里"。它早先是 Firefox 的一款插件。但它可不是普通的插件,它是插件的插件。简单来说,你可以通过 JavaScript 脚本(以下简称“JS 脚本”),来扩展它的功能。因此,只要 JS 脚本能搞定的事情,它都能搞定。而且,你可以指定某个脚本仅仅作用在某个 URL(某个网站)——也就是把脚本跟网站绑定。这样一来,就可以专门针对某个网站的页面进行调整。

◇油猴能干啥?


  看到这里,肯定有人要问了,这些油猴脚本,都能干些啥事捏?俺举几个例子:
比如,某个网站的广告条太碍眼,你可以用 JS 脚本把广告条干掉。
比如,你喜欢到某个视频网站去看视频,但是这个视频网站没有下载按钮。于是你就可以用JS脚本给每个视频加上一个下载按钮,方便你下载到本地收藏。

◇不会写 JS 脚本,咋办?


  很多同学会担心,自己不懂得写JS脚本。其实大可不必害怕。因为油猴已经非常的普及,你能想到的大部分需求,早都已经有人(多半是老外)写好了,而且分享出来了。
  在此,向列位看官隆重介绍:全球最大的(没有之一)油猴脚本收集站点——UserScripts.org。这上面的脚本数量,已经到了6位数。由于脚本太多,你第一次上去的时候,建议先看它的标签分类。根据分类,就可以比较容易滴找到自己要的脚本。

◇支持哪些浏览器?


  前面说了,油猴早先是 Firefox 插件,自然是天生支持火狐。后来 Google 看到这玩意儿挺普及,就让 Chome 浏览器原生支持油猴脚本。也就是说,你无需安装额外插件,就可以让 Chrome 运行油猴脚本。Opera从 8.0 开始,貌似也兼容了油猴脚本(俺没试过,不知兼容性如何)。至于使用 IE 的同学,暂时无福享用了(建议尽早抛弃 IE 这种老土的浏览器)。


★增强阅读器功能的脚本


  既然刚才提到了 UserScripts 网站,随便推荐几个脚本,可以为阅读器增加额外的功能。如果你常用 Google 阅读器,可以去尝试一下。

Google Reader Preview Enhanced


  这个脚本是专门对付那些没有全文输出的RSS(不输出全文的博客,非常讨厌)。当你碰到某个只输出摘要的博文,只要按一下快捷键(Shift+V),该脚本就会在阅读器的正文窗口里,自动显示该博文的全部正文。有了它,你无需离开 Google Reader 就可以看只输出摘要的博客了。

Google Reader - Colorful List View


  此脚本会给文章列表中的每一个帖子着色。相同订阅源文章,会标注相同的颜色。当你选中某个文件夹(Folder) 时,就可以很清楚看出那些文章来自同一个订阅源。
  补充一下:貌似这次改版后,此插件不灵了,也不晓得插件的作者啥时候出新版本。

Google Reader Filter


  看名称就知道,此脚本提供针对文章的过滤功能。你可以设置一些过滤规则,来决定哪些文章在列表中高亮显示,那些文章被排除(变灰)。另外,它还可以帮你隐藏重复的文章。

Google Reader Subscribers Count


  这个脚本会在窗口的右下角显示当前 RSS 的订阅者数量。


★优化阅读器界面的脚本


  除了上述这些增强功能的脚本,还有很多脚本是用来美化 Google Reader 界面的。这些脚本中,有些是历史悠久的,有些是昨天才发布的(专门针对改版后的丑陋界面)。顺便说一下,Google Reader 刚改版,就冒出一堆美化界面的脚本,可见这次改版非常不得人心。

Google Reader for wider screens


  这个脚本有些年头了,而且很小巧。它可以充分利用屏幕的空间来显示文章正文,如果是宽屏显示器,则效果更佳。以下是俺截的两张对比图:

调整前的正文布局
不见图 请翻墙

调整后的正文布局
不见图 请翻墙

Google Reader Absolutely Customizable


  这个脚本有一大坨代码,但是功能也挺多。它在阅读器的界面里,加入了一个定制菜单。通过此菜单,你可以凭自己的喜好,对很多界面元素进行调整或显示/隐藏。
  以下是脚本作者提供的效果图:
定制菜单
不见图 请翻墙

选项对话框
不见图 请翻墙

Google Reader Demarginfier


  这是改版当天就推出的脚本,专门针对改版后的土B界面(此作者动手真快啊)。它可以压缩阅读器搜索条和工具条的高度、压缩文章列表的行高、压缩左边导航树的左边距。

Google Reader - Compact Design


  又一个改版当天快速推出的脚本,功能跟前一个类似。同样能压缩阅读器搜索条和工具条的高度、压缩文章列表的行高、还能压缩左边导航书每个条目的行高(这个功能上面的脚本没有),但是缺少压缩左边导航树的左边距的功能。
  以下是脚本作者提供的效果图:
不见图 请翻墙

GRSeven for Greasemonkey


  这可是咱天朝国产的脚本,也是专门针对改版后的土B界面。它的特色是:把界面顶部的搜索条和工具条合并掉,避免上方空间的浪费。
  以下是脚本作者提供的效果图:
不见图 请翻墙


★自己动手美化阅读器


  请注意,本章节是留给那些富有 DIY 精神,并且略懂网页基础知识的网友。假如你对上述这些界面优化脚本都不满意,想自己动手写一个脚本来美化阅读器。那么,本章节对你应该有帮助。
  反之,如果你对技术一窍不通,或者怕麻烦、或者没时间,请略过本章节。

◇如何美化?


  上述这些脚本对 Google Reader 的界面调整,说白了都是修改 CSS(层叠样式表)。在油猴脚本中,可以调用 GM_addStyle 函数,往当前页面加入一个新的样式表。如果你略懂 CSS,搞清楚这些脚本的代码应该对你来说就易如反掌。

◇调整正文宽度


  以下代码用于修改正文的显示宽度,让正文的宽度能充满屏幕。
GM_addStyle(".entry .entry-body, .entry .entry-title { max-width:100% !important; }");

◇压缩搜索条高度


  以下代码调整阅读器搜索条的高度(也就是阅读器上方有:Logo、搜索框、搜索按钮的那一行)。代码中的 40px 和 6px 表示高度(像素为单位),你可以根据自己喜好,微调这2个数字。
GM_addStyle("#top-bar { height:40px !important; }");
GM_addStyle("#search { padding:6px 0px !important; }");

◇压缩工具条高度


  以下代码调整工具条的高度(也就是阅读器上方有:"订阅"、"标为已读"、"供稿设置"等按钮的那一行)。
GM_addStyle("#viewer-header { height:40px !important; }");
GM_addStyle("#lhn-add-subscription-section { height:40px !important; }");
GM_addStyle("#lhn-add-subscription, #viewer-top-controls-container { margin-top:-15px !important; }");

◇压缩文章列表的行高


  新版界面的文章列表,行高大得离谱了,必须得调小。如下代码可以搞定。
GM_addStyle("#entries { padding:0px !important; }");
// 1.2em 表示行高是字体高度的1.2倍。
GM_addStyle(".collapsed { line-height:1.2em !important; padding:2px 0 !important; }");
// 设置列表左边星号的位置
GM_addStyle(".entry-icons { top:12px !important }");
// 设置列表里文字标题的位置
GM_addStyle(".entry-source-title { top:2px !important }");
GM_addStyle(".entry-secondary { top:2px !important }");
// 设置列表右边"打开原始URL"图标的位置
GM_addStyle(".entry-main .entry-original { top:12px !important }");

◇压缩导航树的左边距


  导航树左边留了一大块空白,也不知要作甚?用如下代码压缩掉。
GM_addStyle(".section-minimize { left:0px !important }");
GM_addStyle("#overview-selector, #lhn-selectors .selector, .folder .name.name-d-0, #sub-tree-header { padding-left:15px !important; }");
GM_addStyle(".folder .folder .folder-toggle { margin-left:12px !important }");
GM_addStyle(".folder .sub-icon, .folder .folder>a>.icon { margin-left:27px !important }");
GM_addStyle(".folder .folder>ul .icon { margin-left:34px !important }");
GM_addStyle(".folder .folder .name-text { max-width:160px; !important }");
GM_addStyle("#reading-list-selector .label { display:inline !important }");

◇压缩导航树不同部分之间的间隙


  导航树由4部分组成,分别是:"主页"(Home)、"所有条目"(All items)、"探索"(Explore)、"订阅"(Subscriptions)。这4块之间的间隙太大,用如下代码压缩。
GM_addStyle(".selectors-footer { margin-bottom:0px !important; padding-bottom:0px !important; }");
GM_addStyle(".lhn-section-footer { margin-bottom:0px !important; padding-bottom:0px !important; }");

◇隐藏导航树的某些部分


  导航树的这4部分,通常是"订阅"用得最多。其它3部分如果用得少,嫌它们太占空间,可以用如下代码隐掉。
// 隐藏"主页"
GM_addStyle("#overview-selector { display:none !important; }");
// 隐藏"所有条目"
GM_addStyle("#lhn-selectors { display:none !important; }");
// 隐藏"探索"
GM_addStyle("#lhn-recommendations { display:none !important; }");

◇调整导航树的宽度


  由于不同人的偏好及屏幕尺寸各有差异。因此,很多刁钻滴用户(比如俺)对导航树占的宽度不满意。你可以用如下代码来调整。代码中的 240px 表示宽度,你可以根据喜好来调整。在这3行代码中,此数值要保持一致。
GM_addStyle("#nav, #nav * { max-width:240px !important; }");
GM_addStyle("#nav { width:240px !important; }");
GM_addStyle("#chrome { margin-left:240px !important; }");


★结尾


  今天说了这一大坨,也不知大伙儿有兴趣不?如果大伙儿对油猴的兴趣比较大,俺可以找时间再介绍其它一些实用的脚本。
版权声明
本博客所有的原创文章,作者皆保留版权。转载必须包含本声明,保持本文完整,并以超链接形式注明作者编程随想和本文原始地址:
https://program-think.blogspot.com/2011/11/greasemonkey-scripts-for-google-reader.html

47 条评论

  1. 自已動手美化閱讀器這個部分,
    完全可以利用css達成,不需要經過油猴啊…
    用Greasemonkey的效率肯定沒UserCSS好,還會多耗費資源

    回复删除
  2. 楼上的同学:
    如果直接用CSS来扩展(比如 Firefox 的 userChrome.css),会影响到所有访问的页面。
    而用油猴,可以仅针对 Google 阅读器的页面进行优化。

    回复删除
  3. 這倒不是一定的,FX強大的地方就是多了@-moz-document
    用它就可以指定作用頁面

    回复删除
  4. 非常感谢楼上的指教。
    俺倒是第一次听说 @-moz-document
    刚才查了一下,确实可以用来指定具体的站点。

    不过,像俺这种程序员出身的,还是比较偏爱 JS 而不太习惯 CSS,毕竟 JS 是可编程的。

    回复删除
  5. 我也是火狐的粉丝。前几个月开始使用油猴。

    回复删除
  6. Google Reader - Colorful List View
    这个失效了......

    回复删除
  7. 把Helvetireader2 - Mescoda ver更新了 http://userscripts.org/scripts/show/114869

    回复删除
  8. to Niclau:
    非常感谢给俺反馈!
    “Google Reader - Colorful List View”确实失效了,应该是这次改版给闹的。
    它的最新版本是今年2月份的。
    想用它的同学,估计要等插件的作者出新版本了。

    回复删除
  9. 博主何不把完整的脚本贴出来

    回复删除
  10. 回复楼上的,没必要全贴出来呀,首先并不是所有人都需要完整脚本,直接点一下install多方便;其次,那站上全有,全贴上来,楼主的博客就不是楼主的博客啦。
    谢谢编程随想啦,这样一来整个界面真的紧凑多了。还有一个小问题,我没在那个网站上找到相关的脚本,就是能不能在reader里面直接添加comment的选项,这样就不用跑到这里才能留言啦。

    回复删除
  11. 还有那个显示全文的脚本貌似也失效了。我安装了怎么没效果呢?shift+V,没错呀……

    回复删除
  12. to 前3楼的网友:
    能够在GoogleReader里直接留言的油猴脚本,俺尚未听说。如果有哪位网友知道的话,麻烦告诉一声。

    回复删除
  13. to 前2楼的网友:
    “Google Reader Preview Enhanced”应该是能用的,俺刚才用 Firefox 测试过了。可能你预览的那个网站,访问比较慢吧。
    另外,如果是用 Chrome 的网友,可以试试看如下脚本
    “Google Reader Preview Enhanced (For Chrome)”
    http://userscripts.org/scripts/show/94012

    回复删除
  14. 我是小白,用的是chrome,问下JS脚本后缀一定是.user才能被安装进chrome,为什么

    回复删除
  15. 楼上的同学:
    在 Firefox 上,油猴这个插件会判断浏览器加载的 JS 文件,只有诸如 XXXX.user.js 的脚本,才认为是油猴的脚本,并尝试进行安装。
    后来 Chrome 兼容了油猴脚本,也就遵循了这个文件命名规则。

    回复删除
  16. 这个真的很好用诶。。以前还想要个类似的东西呢,多亏这篇文章我才知道原来已经有了

    回复删除
  17. 我这个小白跟博主学了很多东西。。。心中感谢

    回复删除
  18. google reader for wider screens真心好用,谢lz

    回复删除
  19. 如果只是样子的话 的确usercss比较好 效率比较高
    另外博主
    好像如果用油猴的话,好像应用css会闪一下
    不知道博主有没有解决方案:

    // ==UserScript==
    // @name iapps_chat
    // @namespace iapps_chat
    // @include http://*iapps.im/chat*
    // ==/UserScript==
    var overrideCSS = " \
    #header{display:none; z-index:0;} \
    #mainWrapper{min-width:651px;width:651px;} \
    #wrapper{width:651px;} \
    #colRight{display:none;} \
    #footer{display:none;} \
    ";
    GM_addStyle(overrideCSS);

    博主可以帮忙测试一下更好

    回复删除
  20. Google Reader - Colorful List View
    一直有效,须设置在阅读器设置里设置一下。

    回复删除
  21. Google Reader - Colorful List View
    一直有效,须设置在阅读器设置里设置一下。

    回复删除
  22. 楼主.我是小白.不知道您用不用read it later.他新出的在线阅读页面也不是很好.可阅读面积很小.不知道能不能通过GreaseMonkey改下呢?应该很方便的.只要把上面那行黄字除去.然后再把上面的两行减少的宽度就行了.不知道能不能您能不能帮忙弄下.麻烦了...

    回复删除
  23. TO Zixiong Su
    UserScripts上有一个针对 Read it Later的油猴脚本,你可以尝试一下。
    http://userscripts.org/scripts/show/74450

    最好能自己学着改 JavaScript 脚本(其实 JS 很简单的)。

    回复删除
  24. 楼主那个Google Reader Preview Enhanced还是不能用啊,我两个都安装了都不行,怎么办,还是我没用好啊

    回复删除
  25. 刚才试了Google Reader - Colorful List View又可以用个,12月更新的

    回复删除
  26. TO minglee
    Google Reader Preview Enhanced 应该能用啊。
    要不咱们邮件沟通,俺帮你找一下原因。

    回复删除
  27. To 楼上

    前几天培训去了,上不了网
    好的 我发邮件给你吧

    回复删除
  28. 点你的Gmail没反应,留下我的邮箱吧chinafy88@gmail.com

    回复删除
  29. 多谢楼主,不过那个Google Reader Preview Enhanced我也用不了,主要是看不到peview按钮,这个按钮的位置应该是在哪里呢?

    回复删除
  30. TO 如如之风
    Google Reader Preview Enhanced的预览可以用快捷键激活,你按一下快捷键(Shift+V)试试看。

    回复删除
  31. To 楼主
    这个快捷键您原文里有写,我也试过,但是不起作用。
    页面右下角状态栏上有个绿色的图标,所有装过的脚本都可以在里面管理,其中GPE这一项是打了勾的,证明已经在运行,但是没有任何反应。
    我在网上看到这篇文章
    http://fis.io/google-reader-preview-enhanced.html
    里面显示有一个preview按钮,但是在我的google reader界面上也看不到啊

    回复删除
  32. To 楼主

    我想我可能找到了使用的方法

    在点到某一篇不能全文输出的文章时,文章标题右侧出现了一个桔红色写着“F”的按钮,点一下它就可以全文输出了。但是我即使把Google Reader Preview Enhanced的脚本删除掉重启后这个按钮还是出现,但是如果把GreaseMonkey禁用就不出现了

    不过在某些情况下这个“F”按钮却是灰色的,比如说韩寒的博客,这个按钮就不管用了,而事实上那篇博客是存在的,不知道是什么道理

    相比chrome的Super Full Feeds for Google Reader插件,这个就有所不如。那个插件可以自动把某个博客里的全部文章都转换成全文输出,而不必一篇篇去点。不知FF里是否有类似的插件呢?

    还是多谢楼主,顺便说一句,我能在这里留言,也多亏在你博客里看到的翻墙工具

    回复删除
  33. TO 如如之风
    Google Reader Preview Enhanced 俺有段时间没用了。
    刚才俺装了一下,发现它失效了。

    自从上次 Google Reader 改版之后(某些HTML的tag变了),导致有些针对 Google Reader 的油猴脚本失效了。

    你到 UserScripts.org 上再找找看,说不定能找到新写的油猴脚本。

    回复删除
  34. TO 如如之风
    如果你把“Google Reader Preview Enhanced”卸载,那个按钮还在,应该就跟“Google Reader Preview Enhanced”没关系了——可能是其它脚本引入的吧。

    回复删除
  35. To 楼主

    是的,我也是这样想的,所以想看一下到底是哪个插件在起作用

    当我把GreaseMonkey禁用后“F”键就不存在了,说明还是GreaseMonkey在起作用

    启用GreaseMonkey,然后把里面装过的四个脚本全部禁用,“F”键依然起作用

    所以我就很疑惑了,我因为不了解GreaseMonkey的工作原理,只能推测说是不是只要输入一次脚本,就能够一直起作用呢?

    回复删除
  36. TO 如如之风
    假如是 Firefox 的 GreaseMonkey,安装脚本后,在 Firefox 的 Profiles 目录下有一个 gm_scripts 目录,所有安装的油猴脚本都在里面。

    如果你把油猴脚本全部卸载,gm_scripts 目录应该是空的。

    你看看这个目录是否还有东西没卸载干净。

    回复删除
  37. 回复
    1. TO dukoufly
      这个扩展能工作,说明它用到的某些 API 接口还没有关闭。
      自从去年佩奇出任 CEO 之后,对很多边缘化的产品进行大扫除。
      俺感觉这些 API 说不定某天也被大扫除清理掉 :(

      删除
  38. 怎么不显示图片?连分割坚线右边的内容都不显示,刷新多次还是这样

    回复删除
    回复
    1. 大概跟你用的翻墙工具有关吧。
      请问你用的是哪个?

      删除
    2. TO 编辑随想

      换了不同翻墙工具,也换了几个不同浏览器,宽带很正常,刷新无数,大多图片显示了,发现就两张图没有显示,不知博主这两张显示正常吗?这两张位置如下:
      -----------------------------
      ◇Google Reader Absolutely Customizable
       
      这个脚本有一大坨代码,但是功能也挺多。它在阅读器的界面里,加入了一个定制菜单。通过此菜单,你可以凭自己的喜好,对很多界面元素进行调整或显示/隐藏。
        以下是脚本作者提供的效果图:

      定制菜单
      不见图 请翻墙


      选项对话框
      不见图 请翻墙
      ------------------------------

      删除
    3. TO 编辑随想

      清除缓存和COOKIES后,我试了试你在2012年11月5日发表的“每周转载: "伟光正"的十八大(评论若干,照片多张)”有很多图片都能很快全部显示出来,就这里有两张图片怎么无论如何也不能显示呢?试过无数次还是这样,奇怪。

      删除
    4. TO 2、3单元的网友
      刚才俺去看了一下,是那两张图的链接失效了。
      不是你的问题,抱歉 :(

      删除
    5. 俺估计是“Google Reader Absolutely Customizable”版本升级后,更换了截图。
      刚才去它的网站找了两张新的截图放上来,现在图片又能看了。

      删除
  39. http://userscripts.org/打不开,听说挂了
    google reader 也挂了
    哎~~~

    回复删除
    回复
    1. userscripts似乎很早以前就挂了

      删除