油猴指令碼是一個瀏覽器擴充套件，如果你還沒聽說過那就簡直是太古代人了 ... 目前來說，使用的人群最多的就是瀏覽器狂熱者和大前端碼農了吧，對於前者，都在瘋狂的找指令碼，後者則瘋狂的輸出 →_→
油猴支援很多主流的瀏覽器，Chrome、Firefox、Edge、Opera、Safari、UC等等，所以實現了指令碼的一次編寫，到處執行了吧，感覺基於瀏覽器的應用才算是真正的跨平臺了。
首先上官網 tampermonkey.net/ 下載或者在 Chrome應用商店裡搜尋油猴下載擴充套件程式，不過這需要藉助梯/子，好在國內也有Chrome外掛的網站，百度一下也能找到。
安裝完成後，油猴會在瀏覽器的擴充套件外掛欄上產生一個圖示：
點選進入管理皮膚之後，即可進入油猴的主介面：
最左邊的小圖示使用來建立指令碼的，設定項用於對油猴外掛進行設定，一般沒什麼需要修改的，保持預設即可。
實用工具裡，我們有很多方式匯入匯出指令碼資源，你可以將你收集的指令碼資源存放在 Google Drive 或者 Dropbox 上，也可以匯出壓縮檔案，這樣更換了遊覽器照樣可以使用原來的指令碼外掛。
已安裝的指令碼里顯示的是你當前安裝的指令碼，可以啟用或者關閉指令碼。
需要說明的是，安裝未知的指令碼使非常不安全的，這些指令碼可以監聽網路請求，按鍵等敏感操作，所以必須安裝可信來源的指令碼，如果熟悉 JavaScript，可以審閱原始碼，檢查是否程式碼中包含敏感操作。
官方的指令碼源：openuserjs.org/ ，可以在此搜尋新增指令碼，有哪些推薦的指令碼也可以上逼乎搜尋一番，這裡就不贅述了。
接下來的，就是介於普通人和大前端的人的一些玩法了，大前端繞路，點選瀏覽器右上角 X 圖示。
首先我們可以試試建立一個新的指令碼：
指令碼整體結構就是如此了，name 是指代你的指令碼名稱，namespace 是名稱空間，可以用你的網站名稱，version 是你的指令碼當前版本，這樣別人如果使用了你的指令碼，還可以及時更新。description 是對你的指令碼的描述，例如：百度超級VIP破解 等等，author 是你的大名，match 是你的指令碼在匹配到什麼 url 時才觸發生效。
在開始接下來的例項的時候，你需要準備的知識有：
HTML+Javascript+jQuery
想要系統性的學習，可以去 MDN 看看： developer.mozilla.org/zh-CN/
修改我們的指令碼內容如下：
然後儲存，開啟任何一個網站都會彈出 'hello world'
這樣，你的第一個指令碼就已經開發完成了。
接下來，我們可以進階一下，對百度的 logo 做點變化，每次開啟百度都給他顯示一隻狗狗圖片。
通過 Chrome 的審查元素功能，知道這個 logo 是在一個 id 為 lg 的 div 下的，我們只要替換這個 div 或者裡面的 img 的 src 屬性值即可，這裡粗暴的替換 div 的內容就行。
修改我們的指令碼內容如下：
指令碼意思是查詢 div id 為 lg 的元素，如果找到了，就將 html 內容重新替換為新的 img 標籤，img 的圖片路徑為我們自定義的圖片路徑。
儲存後我們再次開啟百度：
發現百度的 logo 已經被替換了，不過，是在百度 logo 載入完成後才替換的，那麼有什麼辦法一開始讓他就載入狗狗圖片呢，我們試試利用 DOMContentLoaded 事件。
window.addEventListener("DOMContentLoaded", function(){
// 君の程式碼。
}, false);
複製程式碼結果是，事件不執行了，早期很多人寫的指令碼都是利用 DOMContentLoaded ，不過現在不行了，不知道是不是油猴升級了導致的，這本也算是個不安全的隱患吧。
接下來說說如何除錯我們寫的指令碼，很簡單，早期我為開發企業級應用的時候針對的都是IE6~8瀏覽器，可沒有像 Chrome 這麼強大的除錯工具，都是用的 debugger 設定斷點，然後附加到 Visual Studio 中去除錯，這裡我們也可以用 debugger，然後開啟 Chrome 控制檯。
不過還有個問題就是指令碼有時候會執行多次，這個比較煩。只能藉助 jQuery 的文件就緒函式來判斷了。
// ==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 進行除錯了，在右側 Local 視窗能看到執行變數值。
OK，至此，關於如何開始開發油猴指令碼就說完了，期待大家為油猴指令碼資源多做貢獻 ！