请选择 进入手机版 | 继续访问电脑版

HTML5星空

SASTWeekly|油猴脚本?那是什么

[复制链接]
发表于 2020-6-28 22:20:45 | 显示全部楼层 |阅读模式

SAST weekly 是由电子工程系学生科协推出的科技系列推送,内容涵盖信息领域技术科普、研究前沿热点介绍、科技新闻跟进探索等多个方面,帮助同学们增长姿势,开拓眼界,每周更新,欢迎关注!欢迎愿意分享知识的同学投稿至 eesast@mail.tsinghua.edu.cn , 期待你的作品!


何为‘油猴’

        你是否曾打开百度搜索结果,面对纷杂的侧边栏推送,凌乱的结果排列,还有众多良莠不齐的内容而烦恼不已?

        你是否曾打开某视频网站,终于找到心仪的视频资源,等待你的却是充斥的广告,抑或“限VIP用户观看?"

        你是否在百度网盘10KB/s的速度前无能为力,或是对着百度文档下载券的要求悻然离去?

        这还是一个漫长的故事,它要从.上世纪30年代的北京.....

        打住,让我们化繁为简,从浏览网页的原理讲起。其实,每当你浏览一个网页,电脑接受到的并不是展现在你面前的页面。假设你使用Chrome浏览器,在右上菜单选择更多工具-网页另存为,就会发现:你下载了一个.html文件和一个包括网页中包含的其他资源的文件夹,我们浏览器的功能,就是根据.html文件的描述,配合.css, .js,将资源摆放在合适的位置,并且正确地响应你的各种操作。

   那么,既然我们要浏览的内容其实是根据html文件的描述下载到本地然后再渲染的,我们能不能对其进行编辑,舍弃我们不想浏览的部分呢?答案当然是肯定的,我们有多种脚本语言如JavaScript可以方便地编辑html元素。

        事实上,有许多有识之士早就对一些网站的流氓行为感到不满,他们编写了多样的脚本并上传到一个开放的平台,用以魔改修改许多网站的页面布局和功能,其中非常有名的,就是Greasy Fork,而油猴脚本(Tamper monkey),在此基础上实现了检测打开的网址,匹配时则自动运行对应的脚本。

油猴简介

相信我,接下来的部分完全不需要任何编程知识,便能极大提升你的互联网体验,(如果此前你还不了解)

如上前所述,我们只需要找到这个脚本之家,再在自己的浏览器安装油猴插件,即可快乐地白嫖获取资源啦

首先我们在Tsinghua-Secure下打开https://greasyfork.org/zh-CN 网站,在欢迎页面下方立刻看到几个熟悉的名字

  不过我们按捺住内心的激动,首先按提示安装插件,对于Chrome用户,我们推荐Tamper monkey,之后的内容自然是回到Greasy Fork,探索未知的世界,比如我们先搜个baidu.com看看...

按照安装量排序,我们先打开这个优化百度搜索的结果试试,在打开的页面中点击安装此脚本-安装,画面一闪而过似乎什么也没发生,但是再次打开百度后,Emm...这才是百度的正确打开方式。

        除了百度外,还有很多网页也拥有相应的魔改脚本,实现了各种你不敢想象的功能,不过,也要注意脚本的安全性:一般安装量较大的脚本都没什么问题,毕竟知道这个网站的人很多也看得懂源码2333.


        虽然如此,网站万千,总有一些不知名的小网站 时刻刺激着你的痛点,而你却不得不用,比如下面这位:


没错说的就是你 网络学堂

        那么没有大神的脚本,我们就无能为力了吗?相信你也想到了,既然大神能写出JavaScript脚本,我们也可以(什么逻辑_)

编写油猴脚本

        如上所述,脚本的编写使用JavaScript语言,它是处理网页非常通用的工具,同时对于网页元素的布局需要一些DOM方面的知识,如果你还没有相关的基础,推荐一个两者的入门教程:https://www.liaoxuefeng.com/wiki/1022910821149312

        这里我们一步到位,使用jQuery库来简化代码,并利用油猴脚本实现一个简单的功能:将自己的课程卡片按照作业和通知的多少来排序,把DDL最多的课程放在最下面上面。

首先打开网络学堂,以Chrome浏览器为例,通过F12调试模式确定我们要更改的内容:

注意到所有课程都在一个名为"所学课程"的框内,我们在调试模式下搜索"所学课程",发现这是一个有十分直率的id ”suoxuecourse"的DOM元素,为啥不叫studiedkecheng>-<??

        Anyway,我们用一个变量ClassBox存下它,同样对每个课程框,我们注意到他们都是有class属性clearfix及stu的dd类型元素,我们同样用变量Classes存下它们.

接下来考虑对这些元素的排序,直接对DOM对象排序并不方便,我们想到js语法中数组自带的sort函数,于是创建一个空数组SortedClasses,依次把Classes中的DOM对象存进去。

接下来是比较重要的排序阶段,我们首先想获取每门课程的作业数 h 和通知数 n ,在chrome调试模式中一番寻找后,发现作业数存在一个class属性为green及stud的span类型元素的文本(innerText)里,而通知数类似只是green换为了orange

利用这一点,我们从每个SelectedClass元素中提取对应的  h 和 n 然后参与排序。这里我们向jQuery的 '$'函数传递两个参数,以在指定节点下查找。注意在提取到元素后还应调用text()方法获取文本及parseInt()方法转化字符串为数字:

这之后,SortedClasses中的元素便已经按照作业数->通知数排好序,我们只需依次向上级的ClassBox插入,原来的元素便会跑到ClassBox的底部:

我们在Chrome调试的console控制台输入上述代码,回车!果然课程小格按照预期地按先作业数后通知数排好了序:

接下来的部分是将我们写好的js脚本移植到油猴插件中,并且设定在每次打开网络学堂时运行。我们单击浏览器右上的油猴图标选“添加新脚本”,将自动生成的描述改为如下的格式:

其中添加的match项指定我们要调用的网址,而require项则添加了我们依赖的jQuery库。

然后,如果直接拷贝代码,则我们的脚本会在页面元素加载完成前便执行,起不到应有的效果,所以我们利用jQuery元素的ready ()方法设置代码在课程框ClassBox加载完毕后调用,到此我们油猴脚本的编写就完成了!

现在,打开你的网络学堂,感受被DDL支配的恐惧也不用担心错过DDL的快乐吧!

改变课程顺序只是个开始,掌握了js脚本的编写技巧,你也可以随心所欲地魔改网页,从删掉碍眼的广告开始,你也能一步步亲自提升自己的网页浏览体验。



撰稿人:胡开哲

审稿人:孙志尧

回复

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

更多资源及Java+大数据个人原创视频,
可关注本站官方公众号观看:
快讯

     京ICP备14042305号

html5star team © 2012-2013 html5星空 Comsenz Inc.

GMT+8, 2020-7-10 07:32 , Processed in 0.280193 second(s), 38 queries .

快速回复 返回顶部 返回列表