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在初始化的過程中會創建一個獨立的沙箱來執行腳本，從而保證了漏洞的閉合和安全性。