油猴Tampermonkey初體驗（踩坑）,快速開發本身想要的插件

前言

做爲一名待業的應屆生,天天睜眼第一件事固然是找工做啦,恰好最近省內有組織大批 招聘會,可是當我打開其中一個網站的時候

整整 幾百列個人天啊！！！難怪打開的時候感受瀏覽器怪怪的的。風格也是老政府派的，真怕他要讓我用IE打開。

正文

那該怎麼在這茫茫多的數據中快速找到本身想要的職位呢？聰明的你必定想到了把它網頁整個copy下來再過濾吧,可是這樣數據更新了還要再複製一遍,不划算啊！那是否是能夠寫個油猴腳本呢,以前也只是稍微瞭解過油猴,覺得很複雜！很高端！可是其實很簡單！很簡單！很簡單！重要事情說三遍~

首先的話得有油猴

給你們介紹下里面的基本配置

// ==UserScript==
// @name New Userscript 腳本名字，可自由填
// @namespace http://tampermonkey.net/ 命名空間，防止衝突，最好起個難以衝突的
// @version 0.1 腳本版本號
// @description try to take over the world! 腳本介紹
// @author You 做者名字
// @match /* 腳本響應的網址正則匹配規則
// @grant none 油猴本身的一些權限,暫時還未了解 
// ==/UserScript==
複製代碼

這其中有兩個坑是我遇到的,新版油猴默認模板沒有的。須要自行添加JS和CSS請求

// @resource customCSS https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css
                 //@resource 請求CSS資源
// @require https://code.jquery.com/jquery-3.3.1.min.js 
                //@require 請求JS資源
複製代碼

可是在添加bootstrap後並無效果，還須要添加相關依賴讓油猴解析

// @grant        GM_addStyle
// @grant       GM_getResourceText
//配置塊裏添加上面兩個grant
var newCSS = GM_getResourceText ("customCSS");
GM_addStyle (newCSS);
//代碼添加上面兩行代碼，讓油猴解析CSS
複製代碼

你也能夠在代碼裏面動態添加CSS樣式表

$("head").append (
     '<link '
   + 'href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" '
   + 'rel="stylesheet" type="text/css">'
 );
複製代碼

到如今已經基本配置完了，接下來你就能夠隨心所欲了~

把準備好的代碼複製粘貼 代碼傳送門保存好再去網站刷新一下就能夠看到效果了,是否是很神奇~

後記

作完發現負責網站的同窗已經把本來幾百行的表單輸出改了~是否是發現一次輸出太多行容易崩潰~~總之是一次不錯的入門體驗，可是在可複用性上仍是差一些,改天得改進下，目前只能用在華工的就業網。寫完後吃飯的時候忽然想到我彷佛能夠不用這樣麻煩處理數據,直接給匹配到的tr設置display:table-row其它的設置爲display:none不就得了嗎...

(function() {
            let searchContent = `<div" id="searchContent2x"> <div style="position:fixed;top:10px;left:40%"> <input type="text" id="keyWords2x" placeholder="查找職位..."> <span> <button type="button" id="searchKeywords2x">Go!</button> </span> </div> </div>`
            $('body').append(searchContent)  //添加搜索框和按鈕


            function searchKeywords2x() {
                let key = $('#keyWords2x')[0].value
                console.log(key)
                $(".info_text table tr").each(function() {      //遍歷tr的innerText是否含有關鍵字
                    if (!$(this)[0].innerText.includes(key)) $(this).css("display", "none")
                    else $(this).css("display", "table-row")
                })
            }
            $('#searchKeywords2x').on("click", searchKeywords2x);   //綁定按鈕事件
        })();
複製代碼

這樣的話輸出會簡單不少，可是結果沒有通過處理的直觀,也不失爲一種方法。你有沒有想到用油猴腳本乾點啥事情呢~

by mrXu