如何開發一個用戶腳本系列(2)——須要哪些基礎知識

在第一篇文章中，我對用戶腳本進行了一些介紹，讓你們對其有個大概的瞭解。在這篇文章中，我會對用戶腳本開發過程當中要用到的基礎知識作一些介紹，讓你們知道腳本中哪部分代碼是幹什麼的，經常使用的操做有哪些。主要包括 3 個部分的介紹: 腳本頭部 UserScript 包含的腳本屬性、腳本管理器提供的 API 以及腳本內容中經常使用的 JS DOM 操做。在後面的全部介紹中，我將使用 Chrome 瀏覽器和 Tampermonkey 腳本管理器來操做。

UserScript

打開任何一個腳本的源碼，均可以看到前面有這樣一段相似的代碼:

那麼這段代碼是幹什麼用的呢？是必須有仍是無關緊要呢？若是是必須有，那麼新建一個腳本的時候應該怎麼寫，寫哪些？OK，咱們來一一解釋。 首先，這段代碼是用來給腳本設置屬性的。好比說腳本叫什麼名字，腳本的版本號是多少，腳本的做者是誰，腳本支持在哪些網站上運行等等。其次，這段代碼必須有，只是某些屬性能夠不寫。腳本屬性的語法以下:

// ==UserScript==
// @key value
// ==/UserScript==

每一行都應該以 // 開頭，全部的屬性都應該被 ==UserScript== 和 ==/UserScript== 包含，一行只能寫一個屬性，前面寫屬性名，後面寫屬性值，中間用空格隔開。下面讓咱們來看看經常使用的屬性都有哪些，在什麼狀況下能用到哪一個屬性。

@name

腳本的名稱，必填項。

@description

腳本的功能描述，必填項。

@namespace

腳本的命名空間，通常若是本身有網站的話，能夠寫本身網站的 URL。@namespace 和 @name 這兩個屬性被做爲腳本的惟一標識符，腳本管理器根據它們來判斷一個腳本是否已安裝。若是在更新腳本時更改了任意一項，將發出警告，必填項。

@version

腳本的版本號，主要是爲了更新腳本時使用。每一次更新腳本都應該增長版本號，版本號能夠寫成 0.1 或者 0.0.1 這樣，下次更新腳本的時候改成 0.2 或者 0.0.2 這樣，必填項。

@author

腳本做者，可選項。

@require

腳本須要的一些外部腳本文件，好比經常使用的有 jQuery 文件，可選項。

@include

匹配腳本的運行網站，若是腳本要在多個網站上運行，須要寫多行，一行寫一個網站。跟 @match 兩者必須有一項，不然腳本將不會再任何網站上運行。

@match

功能跟 @include 相似，在匹配網站時，若是不想寫的過於詳細，可使用 * 來匹配任意字符，例如:

@match    https://www.baidu.com/

這一句只有當網址徹底匹配時腳本才能運行，若是 URL 有任何多餘字符腳本就不會運行。而下面這一句就能夠匹配的更多:

@match    *://*.baidu.com/*

這樣不論是以 http 開頭仍是以 https 開頭，都能匹配，後面的網站不論是 www.baidu.com 仍是 tieba.baidu.com 仍是 www.baidu.com/s?wd=apple 之類的，都能匹配，腳本都會運行。固然真正寫腳本的時候，就要注意觀察目標網站的 URL 規則，作到在須要運行腳本的網站上才讓腳本運行。跟 @include 兩者必須有一項，不然腳本將不會再任何網站上運行。

@exclude

排除腳本運行的網站，寫在這個屬性後面的網站，腳本將不會運行，可選項。

@resource

腳本用到的外部資源，好比說腳本中要用到一些網絡圖片，就能夠將圖片連接寫在這裏，並給圖片指定一個名稱，這樣在腳本中就可使用指定的名稱來拿到圖片了。

@grant

指定腳本要用到的腳本管理器的 API，這些 API 能實現數據的存取，將內容複製到剪貼板，網絡請求，打開 tab 頁等功能，具體會在下一部分介紹。若是用不到就寫 none，若是有多個，就寫多行，每行一個。 上面介紹的是一些比較經常使用的屬性，詳細屬性列表能夠查看 Tampermonkey 文檔 或者 Greasemonkey 文檔。

腳本管理器的 API

爲了讓開發腳本更方便，腳本管理器也爲咱們提供了不少 API，咱們在腳本的開頭聲明後，就能夠在代碼裏面使用。下面介紹一下經常使用的 API，有一點須要主要的是，Tampermonkey 和 Violentmonkey 提供的 API 是以 GM_* 的形式存在的，而 Greasemonkey 提供的 API 是以 GM.* 的形式存在的，同時有些 Tampermonkey 有的 API，在 Greasemonkey 裏面並無 API 與之對應。

GM_info

能夠獲取一些腳本的信息，好比在屬性裏面設置的腳本名稱，腳本做者，腳本描述，腳本版本號等等，但用的比較少。示例:

GM_info.script.name

上述代碼能夠用來在腳本中獲取腳本名稱，值類型是 String。

GM_setValue(key,value)

用來存儲一些用戶設置的數據，若是腳本中有須要用戶進行個性化設置的內容，就可使用這個函數進行存儲，好比文件的保存路徑之類的。當下一次腳本更新時，用戶以前設置的內容依然保留，不會丟失。示例:

GM_setValue("save_path"，"D:\downloads\")

上述代碼設置了一條數據，即文件的保存路徑。鍵爲 save_path，值爲 D:\downloads\。key 的類型爲 String，value 的類型能夠是 String、Boolean、Integer、Json 串、List 等。有一點須要注意的是，在使用 Greasemonkey 的 GM.setValue(name,value) 時，value 的類型只能是 String、Boolean、Integer。

GM_getValue(key,defaultValue)

用來獲取經過 GM_setValue(key,value) 設置的數據，能夠設置默認值，這樣當取不到值時，會使用默認值代替。示例:

String savePath = GM_getValue("save_path"，"E:\")

若是先使用 GM_setValue("save_path"，"D:\downloads\")設置了值，那麼 savePath 的值將爲 D:\downloads\，不然 savePath 的值爲 E:\。

GM_openInTab(url,loadInBackground)

用來在瀏覽器的新 tab 頁打開給定的 URL，url 是 String 類型，loadInBackground 能夠是 Boolean 類型，若是是 true，則當前 tab 不變，若是是 false，則當前 tab 變爲新打開的 tab。示例:

GM_openInTab("https://www.baidu.com/",false)

上述代碼將會在新的 tab 頁打開百度，並將這個 tab 頁設置爲當前 tab 頁。

GM_getResourceURL(name)

用來獲取在腳本開頭經過 @resource 設置的外部資源的 URL，name 爲 String 類型，示例:

// @resource    up_button_icon    https://coding.net/u/mofiter/p/public_files/git/raw/master/back_to_top_button.png

腳本開頭經過上述方式設置 icon 的名字爲 up_button_icon，地址爲 https://coding.net/u/mofiter/p/public_files/git/raw/master/back_to_top_button.png，在腳本中就能夠經過下面的方式獲取到 icon 的 url:

img.src = GM_getResourceURL("up_button_icon")

GM_xmlhttpRequest(details)

用來進行網絡請求，有些腳本中可能須要對一些接口進行數據請求，就能夠用到這個函數。details 是 json 類型，示例:

GM_xmlhttpRequest({
    url:"http://127.0.0.1:6800/jsonrpc",
    method:'POST',
    data:JSON.stringify(json_rpc),
    onerror:function(response){
        console.log(response);
    },
    onload:function(response){
        console.log(response);
    }
});

其中，url 是要請求的接口地址，method 是請求方法，通常是 GET 或 POST，data 則是 POST 請求須要發送的數據，onerror 是錯誤回調函數，若是接口請求出錯，就會走這個回調，在函數裏面進行錯誤處理，onload 是成功回調函數，若是接口請求成功，就會走這個回調，在函數裏面進行下一步操做。固然還有不少參數能夠設置，詳見 文檔。此段代碼詳見腳本 網易雲課堂下載助手。

unsafeWindow

這個對象能夠獲取到目標網站中的一些變量和 JavaScript 函數。示例:

unsafeWindow.COVER_INFO

騰訊視頻電視劇的播放頁面有一個變量叫 COVER_INFO，其中包含許多信息，若是有須要，能夠經過這種方式取信息作一些操做。

上面介紹的是一些比較經常使用的 API，詳細 API 函數能夠查看 Tampermonkey 文檔 或者 Greasemonkey 文檔。

經常使用的 JS DOM 操做

腳本的目的是提供方便，給目標網站添加一些官方沒有提供的功能。要對原網站進行操做，可使用 HTML，比較直觀，但比較繁瑣，也可使用 jQuery，比較簡潔，但可能可讀性稍弱一點。若是要在腳本中使用 jQuery，須要先在腳本開頭使用 @resource 引入 jQuery 庫，具體引入哪個版本，能夠本身選擇。

// @require    https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js

而後在代碼開頭定義變量 $，這樣在後面就可使用 $(selector).action() 選擇 HTML 元素並進行操做了。

var $ = window.$;

添加元素和刪除元素

最多見的需求是在目標網站添加一些元素或者刪除一些元素。若是要刪除元素，那麼咱們須要先選擇咱們要刪除的元素。在 HTML 中， 選擇元素的方法有 getElementById()、getElementsByClassName()、getElementsByName()、getElementsByTagName()、querySelector()、querySelectorAll() 等；在 jQuery 中，選擇元素的方法爲 $()，其中括號裏面的選擇器能夠用 #id，.class，標籤名 等。選擇了元素以後，咱們就要刪除它。在 HTML 中，removeChild() 用來刪除當前元素的子元素；在 jQuery 中，remove() 用來刪除當前元素和它的子元素，empty() 用來刪除當前元素的子元素，hide() 用來隱藏當前元素(相應地，show 用來顯示當前元素)。若是咱們要添加元素，就要先建立元素。在 HTML 中，createElement 用來建立元素，appendChild() 用來給當前元素添加子元素，insertBefore() 用來在當前子元素前面加入一個新的子元素；在 jQuery 中，append() 用來在當前元素的結尾添加子元素，prepend() 用來在當前元素的開頭添加子元素，after() 用來在當前元素後面添加同級元素，before() 用來在當前元素前面添加同級元素。

事件操做

當咱們給目標網站添加了元素以後，咱們一般但願能夠處理一些用戶操做。好比當用戶點擊按鈕時，咱們但願觸發一些操做；當用戶鼠標進入某個元素時，咱們但願觸發一些操做；當用戶鼠標移出某個元素時，咱們但願觸發一些操做等等。在 HTML 中，可使用 addEventListener(event,function) 函數向某個元素添加時間監聽。其中 event 表示用戶操做，好比 click、mouseenter、mouseleave 等；而 function 爲事件觸發後要執行的函數。在 jQuery 中，能夠對選擇的元素直接調用相應的方法進行相應的操做。示例:

$("#button").click(function(){
    console.log("點擊了按鈕");
});
$("#button").mouseenter(function(){
    console.log("鼠標移入了按鈕");
});
$("#button").mouseleave(function(){
    console.log("鼠標移出了按鈕");
});

也可使用 on(event,function) 方法實現跟上面相同的操做。示例:

$("#button").on("click",function(){
    console.log("點擊了按鈕");
});
$("#button").on("mouseenter",function(){
    console.log("鼠標移入了按鈕");
});
$("#button").on("mouseleave",function(){
    console.log("鼠標移出了按鈕");
});

總結

本文對腳本開發中須要用到的基礎知識作了一些介紹，包括腳本的屬性設置、腳本管理器提供的函數支持以及一些 HTML 的元素操做。若是還有疑問，能夠留言，從下一篇文章開始，將結合已經完成的腳本示例，講解在真正開發一個腳本的時候，要考慮哪些東西，怎麼寫好一個腳本。