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