随着现代浏览器的不断升级，浏览器给我们带来的已经不仅是浏览网页的体验。而是提供了各种的接口，来满足用户多样化的需求。从这种角度看，浏览器已经渐渐的在脱离它本来的初衷，而是渐渐的朝着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 !