使用Tampermonkey进行JavaScript编程

使用Tampermonkey进行JavaScript编程

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

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

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

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

1.Tampermonkey的安装与配置

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

3个版本

点击确认即可

确认安装

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.');
})();
已标记关键词 清除标记
©️2020 CSDN 皮肤主题: 大白 设计师:CSDN官方博客 返回首页