使用Tampermonkey进行JavaScript编程

使用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.');
})();