大家都知道網頁開發使用的主要是 HTML、CSS、JavaScript，相應的，用戶腳本使用的也是這三個，屬於前端開發的範疇。

用戶腳本是一段JS代碼，一個以 .user.js 結尾的文件，它們能夠優化您的網頁瀏覽體驗。安裝之後，有些腳本能為網站添加新的功能，有些能使網站的界面更加易用，有些則能隱藏網站上煩人的部分內容。

每個腳本都會有其運行的網站，在腳本開頭的 UserScript 裡面可以看到 @match 或者 @include 開頭的語句，後面跟的網址就是匹配的站點，只有當前訪問的網站跟腳本運行的網站匹配時，腳本才能生效。

一個用戶腳本主要包括 3 個部分的介紹: 腳本頭部 UserScript 包含的腳本屬性、腳本管理器提供的 API 以及腳本內容中常用的 JS DOM 操作。

1 安裝一個用戶腳本管理器

要使用用戶腳本，您首先需要安裝一個用戶腳本管理器。根據您使用的瀏覽器不同，可用的用戶腳本管理器也有所不同。

Chrome：Tampermonkey 或 Violent monkey

Firefox：Greasemonkey、Tampermonkey

或 Violentmonkey

Safari：Tampermonkey

Microsoft Edge：Tampermonkey

Opera：Tampermonkey

或 Violentmonkey

Maxthon：Violentmonkey

Dolphin：Tampermonkey

UC：Tampermonkey

Qupzilla：（不需要額外軟件）

AdGuard：（不需要額外軟件）

由上可見Tampermonkey（油猴）有較高的通用性。

https://www.crx4chrome.com/crx/162839/

下載後，在chrome瀏覽器的設置按鈕彈出菜單：“更多工具”→擴展程序中可以添加Tampermonkey

添加後，在瀏覽器的右上角會有新增一圖標，點擊後會有如下彈出菜單：

2 安裝一個用戶腳本

點擊Tampermonkey圖標彈出對話框的“獲取新腳本”：

可以瀏覽到提供腳本源的網站，這裡選擇GreasyFork：

點擊其中的“瀏覽此網站”按鈕，會跳轉到：https://greasyfork.org/zh-CN/scripts

在您找到想要的用戶腳本後，點擊用戶腳本頁面上綠色的安裝按鈕即可安裝。

3 使用用戶腳本

現在您可以訪問這個用戶腳本所針對的網站，腳本應該已經自動啟動和生效。

4 你也可以開發一個用戶腳本

前面提到，一個用戶腳本主要包括 3 個部分的介紹: 腳本頭部 UserScript 包含的腳本屬性、腳本管理器提供的 API 以及腳本內容中常用的 JS DOM 操作。腳本開發自然就是完成這三方面的內容。

4.1 腳本頭部 UserScript

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

下面讓我們來看看常用的屬性都有哪些，在什麼情況下能用到哪個屬性。

@name

腳本的名稱，必填項。

@description

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

@namespace

腳本的命名空間，一般如果自己有網站的話，可以寫自己網站的 URL。@namespace 和 @name 這兩個屬性被作為腳本的唯一標識符，腳本管理器根據它們來判斷一個腳本是否已安裝。如果在更新腳本時更改了任意一項，將發出警告，必填項。

@version

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

@include

匹配腳本的運行網站，如果腳本要在多個網站上運行，需要寫多行，一行寫一個網站。跟 @match 二者必須有一項，否則腳本將不會再任何網站上運行。

@match

功能跟 @include 類似，在匹配網站時，如果不想寫的過於詳細，可以使用 * 來匹配任意字符。

@exclude

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

@resource

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

@grant

指定腳本要用到的腳本管理器的 API，這些 API 能實現數據的存取，將內容複製到剪貼板，網絡請求，打開 tab 頁等功能，具體會在下一部分介紹。如果用不到就寫 none，如果有多個，就寫多行，每行一個。

上面介紹的是一些比較常用的屬性，詳細屬性列表可以查看 Tampermonkey 文檔 或者 Greasemonkey 文檔。

4.2 腳本管理器的 API

為了讓開發腳本更方便，腳本管理器也為我們提供了很多 API，我們在腳本的開頭聲明後，就可以在代碼裡面使用。

4.3 常用的 JS DOM 操作

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

最常見的需求是在目標網站添加一些元素或者刪除一些元素。如果要刪除元素，那麼我們需要先選擇我們要刪除的元素。你在目標網站中添加的元素，要儘量與原網站的配色，樣式相一致。

當我們給目標網站添加了元素之後，我們通常希望可以處理一些用戶操作。比如當用戶點擊按鈕時，我們希望觸發一些操作；當用戶鼠標進入某個元素時，我們希望觸發一些操作；當用戶鼠標移出某個元素時，我們希望觸發一些操作等等。

4.4 腳本開發與發佈

Tampermonkey也提供了開發的界面：

完成了腳本開發後，我們選擇“文件”→“保存到磁盤“，將腳本保存成一個以 .user.js 結尾的文件。

然後我們打開 GreasyFork，發佈我們的腳本。我們點擊選擇文件，從磁盤上選擇我們剛才保存的 js 文件。然後填寫腳本介紹，並上傳截圖，最後發佈腳本。

參考：

https://blog.csdn.net/weixin_43909455?t=1

https://blog.csdn.net/weixin_43909455/article/details/84709746

－End－