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