油猴腳本是一個瀏覽器擴展立镶，如果你還沒聽說過那就簡直是太古代人了 ...
目前來說舔痪，使用的人群最多的就是瀏覽器狂熱者和大前端碼農(nóng)了吧津滞，對于前者铝侵，都在瘋狂的找腳本，后者則瘋狂的輸出 →_→
油猴支持很多主流的瀏覽器触徐，Chrome咪鲜、Firefox、Edge撞鹉、Opera疟丙、Safari、UC等等鸟雏，所以實現(xiàn)了腳本的一次編寫享郊，到處運行了吧，感覺基于瀏覽器的應用才算是真正的跨平臺了孝鹊。
首先上官網(wǎng) http://tampermonkey.net/ 下載或者在 Chrome應用商店里搜索油猴下載擴展程序炊琉，不過這需要借助梯子，好在國內(nèi)也有Chrome插件的網(wǎng)站又活，百度一下也能找到苔咪。
安裝完成后，油猴會在瀏覽器的擴展插件欄上產(chǎn)生一個圖標：
油猴插件
點擊進入管理面板之后柳骄，即可進入油猴的主界面：
油猴
最左邊的小圖標使用來創(chuàng)建腳本的团赏，設置項用于對油猴插件進行設置，一般沒什么需要修改的耐薯，保持默認即可舔清。
實用工具里隘世，我們有很多方式導入導出腳本資源，你可以將你收集的腳本資源存放在 Google Drive 或者 Dropbox 上鸠踪，也可以導出壓縮文件丙者，這樣更換了游覽器照樣可以使用原來的腳本插件。
已安裝的腳本里顯示的是你當前安裝的腳本营密，可以啟用或者關(guān)閉腳本械媒。
需要說明的是，安裝未知的腳本使非常不安全的评汰，這些腳本可以監(jiān)聽網(wǎng)絡請求纷捞，按鍵等敏感操作，所以必須安裝可信來源的腳本被去，如果熟悉 JavaScript主儡，可以審閱源代碼，檢查是否代碼中包含敏感操作惨缆。
官方的腳本源：https://openuserjs.org/ 糜值，可以在此搜索添加腳本，有哪些推薦的腳本也可以上逼乎搜索一番坯墨，這里就不贅述了寂汇。
接下來的，就是介于普通人和大前端的人的一些玩法了捣染，大前端繞路骄瓣，點擊瀏覽器右上角 X 圖標。
首先我們可以試試創(chuàng)建一個新的腳本：
油猴
腳本整體結(jié)構(gòu)就是如此了耍攘，name 是指代你的腳本名稱榕栏，namespace 是命名空間，可以用你的網(wǎng)站名稱蕾各，version 是你的腳本當前版本扒磁，這樣別人如果使用了你的腳本，還可以及時更新示损。description 是對你的腳本的描述渗磅，例如：百度超級VIP破解 等等，author 是你的大名检访，match 是你的腳本在匹配到什么 url 時才觸發(fā)生效始鱼。
在開始接下來的實例的時候，你需要準備的知識有：
HTML+Javascript+jQuery
想要系統(tǒng)性的學習脆贵，可以去 MDN 看看： https://developer.mozilla.org/zh-CN/
修改我們的腳本內(nèi)容如下：
油猴
然后保存医清，打開任何一個網(wǎng)站都會彈出 'hello world'
油猴
這樣，你的第一個腳本就已經(jīng)開發(fā)完成了卖氨。
接下來会烙，我們可以進階一下负懦，對百度的 logo 做點變化，每次打開百度都給他顯示一只狗狗圖片柏腻。
通過 Chrome 的審查元素功能纸厉，知道這個 logo 是在一個 id 為 lg 的 div 下的，我們只要替換這個 div 或者里面的 img 的 src 屬性值即可五嫂，這里粗暴的替換 div 的內(nèi)容就行颗品。
油猴
修改我們的腳本內(nèi)容如下：
油猴
腳本意思是查找 div id 為 lg 的元素，如果找到了沃缘，就將 html 內(nèi)容重新替換為新的 img 標簽躯枢，img 的圖片路徑為我們自定義的圖片路徑。
保存后我們再次打開百度：
油猴
發(fā)現(xiàn)百度的 logo 已經(jīng)被替換了槐臀，不過锄蹂，是在百度 logo 加載完成后才替換的，那么有什么辦法一開始讓他就加載狗狗圖片呢水慨，我們試試利用 DOMContentLoaded 事件得糜。
window.addEventListener("DOMContentLoaded", function(){
// 君の代碼。
}, false);
結(jié)果是讥巡，事件不執(zhí)行了掀亩，早期很多人寫的腳本都是利用 DOMContentLoaded ，不過現(xiàn)在不行了欢顷，不知道是不是油猴升級了導致的，這本也算是個不安全的隱患吧捉蚤。
接下來說說如何調(diào)試我們寫的腳本抬驴，很簡單，早期我為開發(fā)企業(yè)級應用的時候針對的都是IE6~8瀏覽器缆巧，可沒有像 Chrome 這么強大的調(diào)試工具布持，都是用的 debugger 設置斷點，然后附加到 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 進行調(diào)試了惜纸，在右側(cè) Local 窗口能看到執(zhí)行變量值叶撒。
油猴
OK绝骚，至此，關(guān)于如何開始開發(fā)油猴腳本就說完了祠够，期待大家為油猴腳本資源多做貢獻 压汪！
