Greasemonkey历险记

一直有人在重复同一个问题:XX怎么学?技能怎么提升?我也回答过好几次这样的问题:动手去做。每次都换来一个更迷茫的回复:做什么啊?于是这里我从最近的一个小经历出发,分享一下我是怎么找到做什么的,以及怎么从做什么里面学习和积累的。

故事的起因很简单:有个叫leanpub的自出版网站,上面有许多作者跳过出版社在网络上出版技术书籍。上面书籍的质量都不错,还有一些作者很大方,在线阅读免费。比如我最近就在读NicholasC.Zakas的新书《Understading ECMAScript6》:

Greasemonkey历险记_第1张图片
Understading ECMAScript6

有什么问题呢?看到顶部的那个卖书的顶部条和右下角的税率提示了吗?这两个东西会随着页面一直滚动,让我这种有强迫症的人心里难受得不行。是可忍孰不可忍,立刻动手弄掉他们吧。

先用inspect element查看这两个DOM元素,找到他们的id分别是'quick-buy'和'taxamo-confirm-country-overlay'。然后就简单了,用document.getElementById()找出这两个node再分别remove()掉就可以了。

如果只到这里就满足,那我也不会来写这篇文章了。当年我从老师那学来一句话"Can we do better?"。这个简单做法的问题就在于每次刷新页面都得重复着几个指令,真是太麻烦了。作为一个极其懒惰的人,我问了自己一个问题:能自动化吗?能每次加载这个页面,甚至访问这个网站的其他书籍的时候自动运行这个脚本吗?

虽然我眼下没有解决方案,但我依稀记得firefox上有一个插件能做类似的工作。这个插件就是大名鼎鼎的Greasemonkey!该插件的作用就是在制定的页面加载制定的用户脚本,我们可以利用用户脚本来定制页面的行为和属性。

四下一搜,有了这个[小教程](http://hayageek.com/greasemonkey-tutorial/。Greasemonkey的自定义脚本其实非常简单,选择add user script之后就是一个脚本编辑器。只要在js代码前插入一定格式初始化条件就可以了。以上面提到的例子来说:

// ==UserScript==
// @name        leanpub
// @namespace   xnie
// @description neat leanput online reading
// @include     https://leanpub.com/*
// @version     1
// @grant       none
// ==/UserScript==

我们这里稍作讲解:

  • @name:脚本的名字
  • @namespace:脚本的命名空间
  • @description:对脚本作用的简短描述
  • @include:这个比较重要,是该脚本启用的url。这里我用了*来表示对leanpub的所有页面都启用
  • @version:版本号
  • @grant:要使用的特殊api,我们这里不使用

只要插件启用了,在加载include的url后后面的JS脚本就会加载执行了。于是我试着将刚才说过的几句加进去:

// ==UserScript==
// @name        leanpub
// @namespace   xnie
// @description neat leanput online reading
// @include     https://leanpub.com/*
// @version     1
// @grant       none
// ==/UserScript==
var quickBuy = document.getElementById('quick-buy');
var taxamo = document.getElementById('taxamo-confirm-country-overlay');
if (quickBug) quickBuy.remove();
if (taxamo) taxamo.remove();

看起来好像没有什么问题了,刚才能用现在也一定可以。可执行的结果却有些意外,顶部的购买条是去掉了,右下角的税率提示黑框却一直都在。

这是怎么回事呢?仔细想想,再用inspect element观察了一下页面加载的行为,问题找到了。顶部购买条本来就是DOM模板的一部分,因此页面加载完后是肯定可以按id找到它然后删除的。

右下角的税率提示框就不一样了,它是在页面加载完成后注入的node。想想也是正常的,每个国家地区的税率都不尽相同,总得先知道你的国家再提示吧。在页面加载完成后必然有一个脚本检查你的ip段,然后再提示相应国家的税率。正因为有这么一个分析执行再注入node的过程,页面加载后就立即执行的greasemonkey脚本是找不到taxamo的,此时该node还未注入呢。

问题找到了,该如何解决呢?思路是必须等taxamo注入DOM后再执行查找和删除。我第一时间想到的是一个简单粗暴的方法:setTimeout。立即执行步行,等一会再执行总行了吧?一试,还真行!

故事写到这,我们找到了一个能用的方法,可以结束了吗?别忘了问自己那句话:can we do better? 这个方法的问题是不准确,我们怎么知道什么时候node注入了,setTimeout要等多久呢?对于有强迫症的我,多等一秒也是不能忍啊!更何况我可不想被说人这个傻X,居然用setTimeout来处理async的问题。

那么有什么方法可以知道什么时候DOM被注入了呢?继续思考下去,想起当年我做远程面试时用过的一个方法:[MutationObserver](https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver。这个方法提供了一个对DOM变动作出响应的手段:

MutationObserver(  function callback);

callback将在DOM发生改变时被触发,并传入这些改动的信息。通过这个callback我们就可以探测到taxamo的注入啦。

实例化MutationObserver需要两个参数:第一个是要监测的对象,第二个是设置选项。这里我们需要监测的是整个页面的body节点,也就是document.body:

var target = document.body;

第二个设置选项主要是来控制变动时报告的信息,对我们来说最重要的就是子节点的添加,也就是childLis为true:

var config = { attributes: true, childList: true, characterData: true };

前面我们说过,callback在DOM改变时被触发。但注入DOM可不止taxamo一个node,怎么找到我们需要的节点呢?

这里关键的就在于这个callback了。首先要知道callback被触发时会带有一个对我们来说最重要的参数:一个MutationRecord的array,这里面包含了所有变动的的信息。

继续查找文档的MutationRecord章节,一眼就发现了我们需要的东西:addedNodes。该属性是一个所有新添加节点的NodeList。通过遍历他就可以定位taxamo了。

好了,思路清楚了,开始写callback吧:

  var observer = new MutationObserver(function(mutations) {
    mutations.forEach(function(mutation) {
      var addedNodeList = mutation.addedNodes;
      var filter = [].filter;
      var taxamoList = filter.call(addedNodeList, function(node) {
        return (node.id === 'taxamo-confirm-country-overlay');
      });
      if (taxamoList.length > 0) {
        taxamoList.forEach(function(taxamo) {
          taxamo.remove()
        });
        observer.disconnect();
      }
    });    
  });

可以看到,我用了forEach来遍历MutationRecord的数组。然后用了一个filter在nodeList中找出已注入的taxamo节点,最后删除就是了。需要注意的时nodeList不是array,所以不能直接套用array的方法。这里我用了一个call在nodeList上使用filter。另外,节点删除后,不再需要检测页面的改动了,于是用observer.disconnect()来结束检测。

现在清爽了,每次加载页面就自动屏蔽掉烦人的东西了,一秒钟都不会污染你的眼睛。

完整的脚本在这里。

P.S: 除了Firefox, chrome也有一个类似的自动脚本插件Tampermonkey

Greasemonkey历险记_第2张图片
自动清理哦亲

一个小问题和一点不妥协的劲儿,我学会使用了强力的Greasemonkey。另外,就在这个数十行的小脚本里,我了解了如何对DOM变动作出响应,学到了nodeList和array的不同,复习了DOM的基本操作。收获不错,不是么?现在你还迷茫做什么吗?从你身边一切让你不爽的东西做起!

你可能感兴趣的:(Greasemonkey历险记)