油猴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