使用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 *

@match：更加詳細的匹配規則可以參考這里，但目前還未支持’’這種寫法

@exclude：與@match的功能剛好相反，當URL匹配成功時絕不運行該腳本

@require：被指定的JS腳本，需要先被加載并執行，然后才能開始執行該腳本

@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

@run-at：腳本的運行時機，一般為document-start、document-body、document-end其中之一

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

總結

以上是生活随笔為你收集整理的使用Tampermonkey进行JavaScript编程的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。