油猴腳本是一個(gè)瀏覽器擴(kuò)展，如果你還沒(méi)聽(tīng)說(shuō)過(guò)那就簡(jiǎn)直是太古代人了 ...
目前來(lái)說(shuō)，使用的人群最多的就是瀏覽器狂熱者和大前端碼農(nóng)了吧，對(duì)于前者，都在瘋狂的找腳本，后者則瘋狂的輸出 →_→
油猴支持很多主流的瀏覽器，Chrome、Firefox、Edge、Opera、Safari、UC等等，所以實(shí)現(xiàn)了腳本的一次編寫(xiě)，到處運(yùn)行了吧，感覺(jué)基于瀏覽器的應(yīng)用才算是真正的跨平臺(tái)了。
首先上官網(wǎng) http://tampermonkey.net/ 下載或者在 Chrome應(yīng)用商店里搜索油猴下載擴(kuò)展程序，不過(guò)這需要借助梯子，好在國(guó)內(nèi)也有Chrome插件的網(wǎng)站，百度一下也能找到。
安裝完成后，油猴會(huì)在瀏覽器的擴(kuò)展插件欄上產(chǎn)生一個(gè)圖標(biāo)：
油猴插件
點(diǎn)擊進(jìn)入管理面板之后，即可進(jìn)入油猴的主界面：
油猴
最左邊的小圖標(biāo)使用來(lái)創(chuàng)建腳本的，設(shè)置項(xiàng)用于對(duì)油猴插件進(jìn)行設(shè)置，一般沒(méi)什么需要修改的，保持默認(rèn)即可。
實(shí)用工具里，我們有很多方式導(dǎo)入導(dǎo)出腳本資源，你可以將你收集的腳本資源存放在 Google Drive 或者 Dropbox 上，也可以導(dǎo)出壓縮文件，這樣更換了游覽器照樣可以使用原來(lái)的腳本插件。
已安裝的腳本里顯示的是你當(dāng)前安裝的腳本，可以啟用或者關(guān)閉腳本。
需要說(shuō)明的是，安裝未知的腳本使非常不安全的，這些腳本可以監(jiān)聽(tīng)網(wǎng)絡(luò)請(qǐng)求，按鍵等敏感操作，所以必須安裝可信來(lái)源的腳本，如果熟悉 JavaScript，可以審閱源代碼，檢查是否代碼中包含敏感操作。
官方的腳本源：https://openuserjs.org/ ，可以在此搜索添加腳本，有哪些推薦的腳本也可以上逼乎搜索一番，這里就不贅述了。
接下來(lái)的，就是介于普通人和大前端的人的一些玩法了，大前端繞路，點(diǎn)擊瀏覽器右上角 X 圖標(biāo)。
首先我們可以試試創(chuàng)建一個(gè)新的腳本：
油猴
腳本整體結(jié)構(gòu)就是如此了，name 是指代你的腳本名稱(chēng)，namespace 是命名空間，可以用你的網(wǎng)站名稱(chēng)，version 是你的腳本當(dāng)前版本，這樣別人如果使用了你的腳本，還可以及時(shí)更新。description 是對(duì)你的腳本的描述，例如：百度超級(jí)VIP破解 等等，author 是你的大名，match 是你的腳本在匹配到什么 url 時(shí)才觸發(fā)生效。
在開(kāi)始接下來(lái)的實(shí)例的時(shí)候，你需要準(zhǔn)備的知識(shí)有：
HTML+Javascript+jQuery
想要系統(tǒng)性的學(xué)習(xí)，可以去 MDN 看看： https://developer.mozilla.org/zh-CN/
修改我們的腳本內(nèi)容如下：
油猴
然后保存，打開(kāi)任何一個(gè)網(wǎng)站都會(huì)彈出 'hello world'
油猴
這樣，你的第一個(gè)腳本就已經(jīng)開(kāi)發(fā)完成了。
接下來(lái)，我們可以進(jìn)階一下，對(duì)百度的 logo 做點(diǎn)變化，每次打開(kāi)百度都給他顯示一只狗狗圖片。
通過(guò) Chrome 的審查元素功能，知道這個(gè) logo 是在一個(gè) id 為 lg 的 div 下的，我們只要替換這個(gè) div 或者里面的 img 的 src 屬性值即可，這里粗暴的替換 div 的內(nèi)容就行。
油猴
修改我們的腳本內(nèi)容如下：
油猴
腳本意思是查找 div id 為 lg 的元素，如果找到了，就將 html 內(nèi)容重新替換為新的 img 標(biāo)簽，img 的圖片路徑為我們自定義的圖片路徑。
保存后我們?cè)俅未蜷_(kāi)百度：
油猴
發(fā)現(xiàn)百度的 logo 已經(jīng)被替換了，不過(guò)，是在百度 logo 加載完成后才替換的，那么有什么辦法一開(kāi)始讓他就加載狗狗圖片呢，我們?cè)囋嚴(yán)?DOMContentLoaded 事件。
window.addEventListener("DOMContentLoaded", function(){
// 君の代碼。
}, false);
結(jié)果是，事件不執(zhí)行了，早期很多人寫(xiě)的腳本都是利用 DOMContentLoaded ，不過(guò)現(xiàn)在不行了，不知道是不是油猴升級(jí)了導(dǎo)致的，這本也算是個(gè)不安全的隱患吧。
接下來(lái)說(shuō)說(shuō)如何調(diào)試我們寫(xiě)的腳本，很簡(jiǎn)單，早期我為開(kāi)發(fā)企業(yè)級(jí)應(yīng)用的時(shí)候針對(duì)的都是IE6~8瀏覽器，可沒(méi)有像 Chrome 這么強(qiáng)大的調(diào)試工具，都是用的 debugger 設(shè)置斷點(diǎn)，然后附加到 Visual Studio 中去調(diào)試，這里我們也可以用 debugger，然后打開(kāi) Chrome 控制臺(tái)。
不過(guò)還有個(gè)問(wèn)題就是腳本有時(shí)候會(huì)執(zhí)行多次，這個(gè)比較煩。只能借助 jQuery 的文檔就緒函數(shù)來(lái)判斷了。
// ==UserScript==
// @name 第一個(gè)腳本
// @namespace http://tampermonkey.net/
// @version 0.1
// @description try to take over the world!
// @author You
// @include *
// @require http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js
// @grant unsafeWindow
// ==/UserScript==
jQuery.noConflict();
(function( $ ) {
debugger;
var a=12;
var b=45;
var c = a+b;
var d = a-b;
})( jQuery );
在上面的代碼中，我們也加入了 debugger，再次保存，打開(kāi)瀏覽器：
油猴
接下來(lái) F10 和 F11 進(jìn)行調(diào)試了，在右側(cè) Local 窗口能看到執(zhí)行變量值。
油猴
OK，至此，關(guān)于如何開(kāi)始開(kāi)發(fā)油猴腳本就說(shuō)完了，期待大家為油猴腳本資源多做貢獻(xiàn) ！
