随着现代浏览器的不断升级,浏览器给我们带来的已经不仅是浏览网页的体验。而是提供了各种的接口,来满足用户多样化的需求。从这种角度看,浏览器已经渐渐的在脱离它本来的初衷,而是渐渐的朝着Web平台的方向在发展。

本文我们来介绍的是Chrome自己提供的Userscript脚本的机制,用户可以在浏览器中加入自己写的脚本达到各种的需求。删除页面上牛皮癣似的广告啦,添加一些自定义的数据啦,当然还有个貌似最重要的在某神奇的车票网站上刷票啦!
这一切都可以通过添加Userscript脚本的方式来实现!!
还在等什么!?是不是突然发现无比的神奇呢?是不是觉得自己已经摆脱了屌丝的命运,俨然化身成互联网的神了呢?
哈哈,自己DIY,一切就是那么简单!

首先要创建一个以.user.js为后缀名的js脚本文件,例如创建了一个名为home.user.js的文件。
安装脚本的方式也是非常的简单,在浏览器的地址栏中输入“chrome://extensions/”,你就可以看到当前你的Chrome中所包含的扩展包。将我们的home.user.js文件拖拽入其中。

会出现

的提示,说明插件已经安装完成。
这是最新的Chrome为开发者内建了这种简单的扩展机制,非常的方便。

这只是添加了这么一个Userscript空格的脚本,基本上没什么作用。我们也无法看到任何的效果。
下边我们来往home.user.js中添加代码。

从用途上来讲,Userscript代码的结构可以分为两大部分,第一部分是Userscript的注释。用来告诉浏览器,你的这段脚本的作者,名称,日期,作用范围,版本等等一些基本的信息。第二部分则是开发者自己编写的功能代码。
让我们用一个最简单的删除Gmail顶部的牛皮癣小广告的作为例子。

头部的注释的一个简单范例如下所示:

// ==UserScript==
// @name           Just for testing Chrome APP
// @description    Yes
// @version        1.0
// @author         Kai.XU
// @namespace      http://botobe.net/
// @include        https://mail.google.com/*
// ==/UserScript==

让我们一条条的做个解释。

首先外层的

// ==UserScript==
//
// ==/UserScript==

固定格式,浏览器会读取这段注释中的基本信息。
@name@description@version@author用来记录名称,描述和当前软件的版本号以及开发者的名称。
@namespace是浏览器在识别查件的时候,当插件名一样时用以区分不同插件的命名空间。
在头部注释中,比较重要的,是@include@exclude,前者用来表示当前的脚本所能作用的域,后者表示在前者包括的内容中再剔除后者表示的域。
例如:

// @include    *
// @exclude    http://127.0.0.1:3000/*

则表示,该脚本能作用的地址为除了127.0.0.1:3000域名下的所有地址。

脚本内容中能够使用包括当前页面提供的,以及Chrome原生支持的所有API,文档可以参考这里
好了,现在我们可以编写删除Gmail中广告部分的代码了,如下所示

var removeAdd = function() {
  var mqEl = document.getElementsByClassName('mq');
  if (mqEl && mqEl.length != 0) {
    mqEl = mqEl[0];
    mqEl.remove();
  } 
  setTimeout(removeAdd, 500);
};

removeAdd();

OK,到此为止,插件差不多完成了。用上述的步骤,重新安装Userscript,是不是发现打开Gmail的时候,广告不见了呢?
如果需要调试我们的插件,可以打开控制台 ——> source ——> content script来进行调试。

当然,这里还需要注意一个问题,就是这段代码究竟是在页面加载到何时的情况下运行的呢?
可以写个简单的测试脚本:

document.addEventListener('DOMContentLoaded', function() {
  console.log('Document load event fired!');
}, false);

window.addEventListener('load', function() {
  console.log('Window onload event fired!');
}, false);

再将home.user.js脚本中打印一串“User script loaded!”。在不断地刷新页面,可以得出结论,userscript应该是放在window.onload中执行的,位于domready时间之后,因此可以放心的编写安全的代码了。

Enjoy yourself !
转载请注明出处
botobe.net
本文Github链接

2013.06.28
一切安好。
Merci !