如何開發一個油猴(TamperMonkey)腳本

油猴腳本是一個瀏覽器擴展，若是你還沒據說過那就簡直是太古代人了 ... 目前來講，使用的人羣最多的就是瀏覽器狂熱者和大前端碼農了吧，對於前者，都在瘋狂的找腳本，後者則瘋狂的輸出 →_→

油猴支持不少主流的瀏覽器，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，至此，關於如何開始開發油猴腳本就說完了，期待你們爲油猴腳本資源多作貢獻 ！

---

原文：www.jianshu.com/p/2408cdb48…