使用Tampermonkey进行JavaScript编程

Greasemonkey是Firefox的一个插件，可以利用它实现在浏览器侧对于指定的网站页面添加预设的JavaScript脚本从而实现许多神奇的功能（比如爬虫、数据下载、动态裁剪或增加页面内容）。

而这篇文章的主角Tampermonkey的功能和Greasemonkey基本一致，只不过它对于Chrome的兼容性要更好。

官网地址：https://tampermonkey.net/

下面，我们来介绍如何使用Chrome+Tampermonkey来进行

1.Tampermonkey的安装与配置

点击上面的官网地址超链接，然后从下面的三个版本中选择一个较为合适的进行安装即可。

点击确认即可

2.运行脚本

我们首先进入CSDN这个网站的首页，http://blog.csdn.net/
然后在Chrome的插件栏找到我们的Tampermonkey，左击后出现下面的弹窗：

然后点击添加新脚本，进入到我们的脚本编辑器

然后将脚本的内容修改如下：

// ==UserScript==// @name         hello_1// @namespace     http://blog.csdn.net/// @version      0.1// @description  alert hello// @author       You// @match        http://blog.csdn.net/*// @grant        none// ==/UserScript==(function() {    'use strict';    // Your code here...    alert('Hello, from Tampermonkey.');})();

稍微解释一下上面的脚本代码，由// ==UserScript==和// ==/UserScript==包裹起来的并不是一般的注释，它是会被Tampermonkey引擎解析并执行的，一般称它为元数据块。

我们需要重点理解下面这一行代码的含义。
// @match http://blog.csdn.net/*
它的含义就是，当我们打开的页面地址符合上面的通配规则，那么便自动运行我们的这个脚本。

接着，点击“保存”按钮，那么这个脚本就保存在Tampermonkey内部，随时可以进入管理页面进行修改。

然后我们刷新一下我们的CSDN页面，就会惊喜地发现我们的脚本自动运行了。

3.关于元数据块

下面我来介绍下一些比较重要的元数据块字段：
1. @name：脚本名称
2. @namespace：相同命名空间的脚本运行在同一个上下文（共享变量）
3. @version：当前脚本的版本号，值得注意的是Tampermonkey支持脚本自动更新
4. @author：脚本作者
5. @contributor：脚本部分代码的贡献者，支持多值
6. @description：该脚本的简单功能和原理描述
7. @include：类似于@match，即打开的页面地址符合该通配规则，便自动运行该脚本，它们都支持多值，写法示例如下：

// @include http://tampermonkey.net/*// @include http://*// @include https://*// @include *

1. @match：更加详细的匹配规则可以参考这里，但目前还未支持’’这种写法
2. @exclude：与@match的功能刚好相反，当URL匹配成功时绝不运行该脚本
3. @require：被指定的JS脚本，需要先被加载并执行，然后才能开始执行该脚本
4. @resource：类似于上面的@require，但它指定的是一般的资源文件，加载后便可以在脚本中通过GM_getResourceURL和GM_getResourceText进行访问。写法示例如下：

// @resource icon1 http://tampermonkey.net/favicon.ico// @resource icon2 /images/icon.png// @resource html http://tampermonkey.net/index.html// @resource xml http://tampermonkey.net/crx/tampermonkey.xml

1. @run-at：脚本的运行时机，一般为document-start、document-body、document-end其中之一
2. @user-agent：重写所有的匹配成功URL的HTTP请求报文的头部为指定的值，具体取值可以参考这里

4.操作DOM

接下来我们写一个修改CSDN页面标题的脚本，来展示如何操作DOM

// ==UserScript==// @name         hello_2// @namespace     http://blog.csdn.net/// @version      0.1// @description  DOM hello// @author       You// @match        http://blog.csdn.net/*// @grant        none// ==/UserScript==(function() {    'use strict';    // Your code here...    var title = document.getElementsByTagName("title")[0];    title.innerHTML = 'Hello, from Tampermonkey.';})();

脚本运行前：

脚本运行后：

5.使用jQuery

// ==UserScript==// @name         hello_3// @namespace     http://blog.csdn.net/// @version      0.1// @description   jQuery hello// @author       You// @match        http://blog.csdn.net/*// @grant        none// @require http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js// ==/UserScript==(function() {    'use strict';    // Your code here...    $('title').eq(0).html('Hello, from Tampermonkey.');})();