您的位置:

Tampermonkey脚本详解

Tampermonkey是一款非常流行的用户脚本管理器,它可以让你在网站上添加自己的JavaScript脚本。这篇文章将会从多个方面对Tampermonkey脚本进行详细阐述,从而让读者更好、更全面地了解Tampermonkey的使用。

一、脚本管理

当你在Tampermonkey中保存了很多脚本后,如何方便地管理它们?Tampermonkey提供了多种方式进行脚本管理。

首先,在UI界面上,Tampermonkey会将你的脚本按照不同的类别分别管理。比如说,你可以在“Installed”栏中查看目前已经安装好的脚本;在“Editor”栏中进行代码编辑;在“Setting”栏中进行Tampermonkey设置。

其次,在脚本本身的编辑页面,你可以通过点击头部的“Monkey”图标,再点击“Dashboard”来进入Tampermonkey总管理界面。在这里你可以看到所有已经安装好脚本的统计数据,包括安装日期、访问次数等等。

最后,在Tampermonkey的一级UI界面,也就是你在浏览器右上角看到的小脚本icon那里,点击进去就可以看到所有的脚本列表了。这里的列表支持多种排序方式,包括按照脚本名称、上次执行时间、访问次数等等。

二、自定义UI

如果网站提供的UI功能不能满足你的需求,那么该怎么办呢?Tampermonkey便给我们提供了这样一种可能——自定义UI。

所谓自定义UI,就是指在脚本里面可以执行HTML、CSS、JS等多种前端代码,从而达到自定义UI的效果。比如说,当你浏览一个网站的时候,希望隐藏它的大量广告信息,便可以使用以下脚本:

// ==UserScript==
// @name         Hide ads
// @namespace    http://www.yourwebsite.com/
// @version      0.1
// @description  Hide ads in the website
// @author       Your Name
// @match        http://www.example.com/*
// @grant        none
// ==/UserScript==

(function() {
    'use strict';

    var ad = document.getElementById("ad");
    ad.parentNode.removeChild(ad);
})();

上述脚本中,我们首先使用JavaScript获取了id为“ad”的DOM元素,然后再通过调用removeChild函数将其移除。这样一来,广告便被隐藏起来了。

三、脚本自动更新

如果你在Tampermonkey中保存了很多脚本,并且希望这些脚本可以自动更新,那么该怎么办呢?这里我们推荐一个非常好用的脚本——“Tapermonkey-Script-Updater”。

该脚本可以帮助我们自动更新Tampermonkey脚本。在使用之前,我们需要先安装它:

// ==UserScript==
// @name         Tampermonkey Script Updater
// @version      1
// @description  Update Tampermonkey scripts automatically
// @match        *://*/*
// ==/UserScript==

(function() {
    'use strict';

    var win = (typeof unsafeWindow != undefined ? unsafeWindow : window);
    var $ = win.jQuery;

    if (!$) {
        return console.log("no jQuery");
    }

    $.fn.tampermonkey_script_updater = function(option) {
        var now = Date.now();
        var defaults = {
            url: '',
            version: 0,
            lastUpdated: now
        };
        //...
    };
})();

该脚本会自动检测Tampermonkey脚本的最新版本,并在检测到有更新时自动进行更新。通过使用它,我们就可以更方便地管理自己的Tampermonkey脚本了。

四、脚本的沙箱机制

在使用Tampermonkey脚本的过程中,有一个非常重要的安全措施——沙箱机制。

所谓沙箱机制,就是指Tampermonkey会在每个脚本的执行环境中创建一个沙箱。该沙箱只能在特定的限制下运行代码,以保护浏览器在运行过程中不受Tampermonkey脚本的影响。

以下是一个例子:

// ==UserScript==
// @name            MyScript
// @description     Example script
// @run-at          document-start
// ==/UserScript==

unsafeWindow.test = 'hello';

(function() {
    var test = 'world';
    console.log(unsafeWindow.test); //输出 hello
    console.log(test) // 输出 world
})();

上述脚本中,我们首先在全局作用域下创建了一个属性test,并将其设置为‘hello’。然后在所有代码执行之前,我们通过run-at选项将脚本运行在document-start这个时间戳下。接着,我们在立即执行函数中创建了一个变量test,其值为‘world’。最后,我们输出了全局作用域下的test和局部作用域下的test。令人惊奇的是,最终的输出结果分别为‘hello’和‘world’!这是因为,Tampermonkey在初始化的过程中会创建一个独立的沙箱来执行脚本,从而保证了漏洞的闭合和安全性。