前一段時(shí)間在作者群里大家討論，萌生了寫個(gè)油猴腳本的想法，主要作用是給頁(yè)面上增加一些好玩的功能。在寫腳本的過(guò)程中，重新整理了一些關(guān)于油猴腳本的信息，也就有了本文。

油猴腳本：是什么、能干嘛？

油猴腳本，正式的叫法是用戶腳本（user script）。之所以叫做「油猴」，是因?yàn)榈谝粋€(gè)制作這個(gè)瀏覽器擴(kuò)展的作者 Aaron Boodman 起名叫做 Greasymonkey，中文直譯就是「油膩的猴子」；后面其他腳本開發(fā)的時(shí)候，基本都在沿用 Greasymonkey 的一些基本規(guī)范，這些腳本也就統(tǒng)稱為「油猴腳本」了。

本文后續(xù)還是會(huì)采用本名「用戶腳本」。

你可以將用戶腳本理解為一種可以根據(jù)我們的實(shí)際需求，為網(wǎng)頁(yè)「加料」的手段。如果你之前從來(lái)沒有使用過(guò)用戶腳本又想體驗(yàn)一下的話，可以按照以下步驟操作來(lái)快速感受一下它的魅力：

1. 下載瀏覽器擴(kuò)展，絕大部分情況下我都推薦Tampermonkey，根據(jù)你使用的瀏覽器， 可以訪問(wèn)并安裝：
   1. Chrome-Tampermonkey
   2. Firefox-Tampermonkey
   3. Safari-Tampermonkey
2. 找到腳本源，這里我把一個(gè)腳本發(fā)布在了 Greasyfork 上，大家可以點(diǎn)擊 少數(shù)派作者激勵(lì)器 查看。
3. 頁(yè)面中有一個(gè)綠色的安裝按鈕，點(diǎn)擊就可以了。

安裝好之后，訪問(wèn)我的 作者文章頁(yè)面 （或者你喜歡的其他作者），在右側(cè)的「成就與徽章」這一部分，你就可以看到多出來(lái)了一個(gè)新的部分。如果這個(gè)作者太長(zhǎng)時(shí)間沒有更新，就會(huì)出現(xiàn)個(gè)紅色的字體激勵(lì)作者去寫稿哦：

雖然這個(gè)腳本非常簡(jiǎn)單，但是看到這里，你已經(jīng)了解了用戶腳本最核心的功能了。

用戶腳本的歷史與不同版本

最早的時(shí)候，F(xiàn)irefox 火狐瀏覽器向開發(fā)者開放了擴(kuò)展的能力，所有的開發(fā)者可以在火狐瀏覽器開放的能力內(nèi)開發(fā)一些新的能力。 2004 年底，Aaron Boodman 在看到另一個(gè)用于精簡(jiǎn)網(wǎng)頁(yè)的擴(kuò)展的時(shí)候，想到了這個(gè)絕妙的點(diǎn)子，隨機(jī)在 2005 年初發(fā)布了最初的 0.25版本 Greasymonkey。

很快，大家就想到了通過(guò) Greasymonkey 寫一些用于屏蔽廣告的腳本（這個(gè)習(xí)俗到現(xiàn)在都還有），但也被一些廣告主吐槽。不過(guò)后面等到 ADblock 上線之后大家就轉(zhuǎn)而去噴這一類擴(kuò)展了。

到了 2010 年，隨著 Chrome 瀏覽器高歌猛進(jìn)，另一位作者 Jan Biniok 開發(fā)了 Chrome 版本的用戶腳本管理器擴(kuò)展，起名叫做 Tampermonkey，直譯應(yīng)該叫做「篡改的猴子」。

我個(gè)人覺得這個(gè)名字比 Greasymonkey 更貼切一些，符合用戶腳本的實(shí)際作用。

到目前為止，Tampermonkey 已經(jīng)有超過(guò)千萬(wàn)的用戶下載使用了，評(píng)分也非常高，是目前平臺(tái)支持最完整的用戶腳本擴(kuò)展。Tampermonkey 在權(quán)限控制、腳本編輯和調(diào)試、全局黑白名單這些方面都做得相當(dāng)不錯(cuò)，易用性相比 Greasymonkey 提升了不少。

而 2013 年 Violentmonkey「暴力猴」的上線又解決了兩個(gè)痛點(diǎn)：

• 支持了遨游瀏覽器
• 完全開源，地址見 GitHub

其實(shí) Greasymonkey 也是開源的¹

這幾款主流的瀏覽器擴(kuò)展的支持情況見下表，如果有不當(dāng)請(qǐng)留言指正。

用戶腳本的原理淺析

當(dāng)然了，如果要用嚴(yán)謹(jǐn)一點(diǎn)的定義來(lái)說(shuō)，用戶腳本其實(shí)是一種注入式的 JavaScript 程序，在網(wǎng)頁(yè)本身的程序之外，通過(guò)一些手段，將用戶需要的數(shù)據(jù)和邏輯注入到當(dāng)前的網(wǎng)頁(yè)中，達(dá)到修改界面、增加功能等等的目的。

換句話說(shuō)用戶腳本也是 JavaScript。JavaScript 能實(shí)現(xiàn)的能力，用戶腳本基本也能做，比如操作頁(yè)面元素，可以給頁(yè)面中增加、刪減、修改頁(yè)面元素，最常見的去廣告腳本就是這么實(shí)現(xiàn)的。

不過(guò)用戶腳本能提供一些普通 JavaScript 實(shí)現(xiàn)不了的能力。Greasymonkey 在最早的 0.25 版本中就帶來(lái)了兩個(gè)基本的功能：

• GM_xmlhttpRequest：用于發(fā)起跨域請(qǐng)求
• GM_registerMenuCommand：當(dāng)用戶操作菜單時(shí)，觸發(fā)一個(gè)行為

這兩個(gè)功能到現(xiàn)在為止仍然非常核心，這里稍微解釋一下背景。

跨域請(qǐng)求

為了安全起見，瀏覽器在頁(yè)面加載的時(shí)候會(huì)有一個(gè)同源策略，如果頁(yè)面中的 javaScript 來(lái)自另一個(gè)域名，瀏覽器就會(huì)認(rèn)為這個(gè)不安全不讓其加載運(yùn)行，但有的時(shí)候用戶可能會(huì)有一些別的需求。

舉個(gè)例子：比如說(shuō)在京東或者當(dāng)當(dāng)上買書的時(shí)候，想看一下豆瓣上用戶的評(píng)分，這種情況下就需要用到用戶腳本的這個(gè)能力了。在京東的頁(yè)面中，我們就可以借助用戶腳本調(diào)用這個(gè) GM_xmlhttpRequest 的 API 去訪問(wèn)豆瓣平臺(tái)的查詢接口。

菜單操作

很多情況下，用戶腳本不需要自動(dòng)執(zhí)行，而是需要使用者來(lái)手動(dòng)運(yùn)行，這時(shí)就需要 GM_registerMenuCommand 了，在點(diǎn)擊之后，觸發(fā)一個(gè)寫好的函數(shù)，就可以完成改變頁(yè)面數(shù)據(jù)，或者發(fā)起某些請(qǐng)求的情況。

舉個(gè)例子：我在頁(yè)面中看到一個(gè)不認(rèn)識(shí)的單詞，想要查詢一下，這時(shí)候選中這個(gè)單詞，然后觸發(fā)這個(gè)接口，就可以實(shí)現(xiàn)查詢的效果（當(dāng)然也有很多的別的能力可以實(shí)現(xiàn)劃詞查詢）。

除了這兩個(gè)功能之外，目前的用戶腳本，大多采用了 Greasemonkey 制定的 V4 API 規(guī)范。通過(guò)這個(gè)規(guī)范，我們就能知道用戶腳本可以做什么了。

• 本地存儲(chǔ)數(shù)據(jù)：這個(gè)能力和瀏覽器自帶的 localStorage 比較像，可以給予用戶腳本存儲(chǔ)一些數(shù)據(jù)的能力。比如一些個(gè)性化的用戶設(shè)置（譬如一張可愛的背景圖）、用戶數(shù)據(jù)（你關(guān)注的股票和基金）等等。
• 獲取外部資源：譬如從外部的地址獲取圖片、CSS 文件等等。
• 發(fā)起瀏覽器提醒：調(diào)用瀏覽器右上角的那種提醒，可以指定文字圖片和點(diǎn)擊之后的效果。
• 打開一個(gè)新頁(yè)面：這個(gè)就很好理解，就是打開一個(gè)新的頁(yè)面……
• 設(shè)置剪貼板：這個(gè)能力可以訪問(wèn)你的剪貼板并給里面塞進(jìn)去指定的內(nèi)容。

在 V3 版本的 API 中，還多了幾個(gè)能力，包括：

• 插入 CSS 樣式
• 下載文件

不過(guò)上述的幾個(gè)用戶腳本擴(kuò)展也出現(xiàn)了一些自己的差異，比如 Tampermonkey 就支持了插入節(jié)點(diǎn)的能力，也支持獲取當(dāng)前標(biāo)簽頁(yè)面信息的能力。

如果你是一個(gè)用戶腳本開發(fā)者，需要注意一下這些差異點(diǎn)。

從哪里獲取用戶腳本

指望每一個(gè)人都去自己寫腳本是不現(xiàn)實(shí)的，這需要大家有一些基本的前端開發(fā)能力。大部分的用戶都是去找一些現(xiàn)成的腳本來(lái)使用，這就是所謂的「腳本源」。

最早期的腳本源，最有名的是 userscript.org 站點(diǎn)，不過(guò)由于維護(hù)不力，導(dǎo)致后面充斥著各種各樣的有害腳本，非常影響大家使用。目前這個(gè)站點(diǎn)已經(jīng)下了，我也沒有給它加上可以點(diǎn)擊的超鏈接。

如果你想體驗(yàn)，可以訪問(wèn) https:/// 這個(gè)鏈接來(lái)找到之前的老腳本。

當(dāng)然我更推薦下面的幾個(gè)腳本源：

• GreasyFork 可能是目前量最大的源，最開始讓大家體驗(yàn)的 少數(shù)派作者激勵(lì)器 也是這個(gè)平臺(tái)中托管的
• OpenUserJS 另一個(gè)開放的腳本源
• Userscript.Zone

當(dāng)然，直接在 GitHub 上去找腳本也是個(gè)不錯(cuò)的選擇。

用戶腳本 vs. 瀏覽器擴(kuò)展

在上面提到的劃詞翻譯這個(gè)例子中我們其實(shí)引入了這樣一個(gè)問(wèn)題：同樣一個(gè)需求，如果瀏覽器擴(kuò)展和用戶腳本都能實(shí)現(xiàn)，我們應(yīng)該如何選擇？

一方面，瀏覽器擴(kuò)展相比用戶腳本誕生的時(shí)間其實(shí)更晚，各家的瀏覽器擴(kuò)展后發(fā)制人，的確也有了比用戶腳本強(qiáng)得多的功能實(shí)現(xiàn)；但另一方面，雖然腳本能力有限，但是它們占用的系統(tǒng)資源和內(nèi)存又更少一點(diǎn)。

另外，從安全性角度上來(lái)說(shuō)，用戶腳本雖然也爆出過(guò)不少 竊取個(gè)人信息、替換返利鏈接²

因此我自己的解決方案是，對(duì)于輕量一些的場(chǎng)景，通過(guò)用戶腳本+用戶樣式（user style）解決大部分瀏覽需求，重一些的場(chǎng)景則會(huì)選擇瀏覽器擴(kuò)展。當(dāng)然了，如果你的設(shè)備對(duì)保密性和安全等級(jí)有著較高的要求，我還是不建議你安裝任何用戶腳本。

結(jié)語(yǔ)

用戶腳本作為一個(gè) 17 年前的互聯(lián)網(wǎng)老古董，現(xiàn)如今仍有自己的用武之地，還是十分令人感慨。但作為油猴使用指南的第一期，本文僅為增加大家對(duì)「油猴腳本」的一點(diǎn)了解，如果你想解鎖用戶腳本的全部實(shí)力、甚至自己動(dòng)手制作用戶腳本，還請(qǐng)留意本系列的后續(xù)內(nèi)容更新。

> 下載 少數(shù)派 2.0 客戶端、關(guān)注 少數(shù)派公眾號(hào)，解鎖全新閱讀體驗(yàn) ??

> 實(shí)用、好用的 正版軟件，少數(shù)派為你呈現(xiàn) ??