• 《瘟疫传说》:黑死病恐怖 姐弟在绝望中求生 2019-04-10
  • 陕西国防工业职业技术学院百名大学生志愿者敬老院慰问孤寡老人陕西国防工业职业技术学院百名大学生志愿者敬老院慰问-陕西教育新闻 2019-04-08
  • 西藏拉萨:新家园 新生活 2019-04-08
  • 尊重和保障宗教信仰自由的中国实践 2019-04-06
  • 一敬泯恩仇 俄罗斯队主帅这个动作太暖了 2019-03-20
  • 四大名著剧组首次同台忆往事 经典影视剧如何铸就? 2018-12-07
  • “天眼”凝望 探秘宇宙 2018-12-07
  • 0

    如何开发油猴脚本,简单的编写第一个油猴脚本(一)

    Posted by 撒得一地 on 2018年9月28日 in Chrome插件, 杂谈
    国外稳定加速器推荐    Express | Vypr

    油猴,估计大家都很熟悉了,我们常常用它来定制一些网页功能。比如去掉网页广告,下载网站图片视频等等。之前撸了好多篇关于油猴的文章,还不是很熟悉的小伙伴可以参考这两篇:

    一款超级好用的插件Tampermonkey(油猴)

    推荐几款好用的油猴脚本

    Chrome 油猴插件下载地址:下载直达

    如果你无法访问 Chrome 商店,这里附上百度网盘下载地址:

    链接: https://pan.baidu.com/s/1zGrXKirGq8XQlowtAF3AhA 提取码: q3u7

    本文主要介绍的是如何编写第一个简单的油猴脚本,在编写油猴脚本前,需要你有 html、js、css 等基础知识。如果你对 js、css 很熟悉,那么开发油猴脚本对你来说应该非常容易。

    在编写油猴脚本之前需要先熟悉一下脚本的元数据块,脚本的元数据块一般写在脚本的头部。常用的几个包括脚本名称,命名空间,版本,描述,作者,脚本生效的地址等等。下面详细的说明下这些参数:

    	@name  脚本名称。当你定义完后,在脚本管理器(如 TamperMonkey)下的管理面板会显示该脚本名称。
    
    	@description 脚本描述。
    
    	@namespace 命名空间,比如定义个人主页,可以是名称或 url 地址。
    
    	@version  脚本版本号,比如 0.1 。
    
    	@match、@include、@exclude 三个含义一样,定义脚本要生效的 url 地址,该 url 地址可以使用正则匹配??梢酝倍ㄒ宥喔?。
    
    	@require  引用外部脚本,比如 @require //cdn.bootcss.com/jquery.min.js
    
    	@license  脚本使用的许可协议。
    

    更多参数使用及含义,可以查看官方文档地址:https://tampermonkey.net/documentation.php

    元数据格式规范:

    	// ==UserScript==
    	// @key value
    	// ==/UserScript==
    

    了解完这些参数后,就可以开始编写第一个简单的油猴脚本了。以 Chrome 下 TamperMonkey 为例,生效站点为百度,访问百度后弹出 hello world 弹窗。

    油猴脚本编写一:hello world 弹窗

    首先在 Chrome 插件栏里选中 tampermonkey,然后选择添加新脚本,如:

    选择添加脚本,开始编写脚本

    然后修改头部元数据信息,具体代码如下:

    	// ==UserScript==
    	// @name         Test
    	// @namespace    //www.cfage.com
    	// @version      0.1
    	// @description  This is my first script
    	// @author       Sandy
    	// @match        *://www.baidu.com/*
    	// @grant        none
    	// ==/UserScript==
    
    	(function() {
    	    'use strict';
    
    	    // Your code here...
    	    alert('hello world');//弹窗 hello world 弹窗
    	})();
    

    编写完代码后使用快捷键 ctrl+s 就可以保存脚本了。下面试下脚本是否生效,访问百度后弹窗 hello world:

    成功后,验证脚本是否生效

    这样我们就完成了第一个油猴脚本,你可以根据自己的个人需要编写其它更有实用性的小功能。下面再介绍一个油猴脚本实例。

    油猴脚本编写二:去除百度搜索结果前面的广告

    首先随便搜索一个关键词,然后查看源代码,可以发现一些基本规律,就是左侧的所有搜索结果由 1 个大的 div 组成,而里面每个搜索结果再有一个小 div 组成。一般来说,搜索结果 div 里面的 id 值为 1-10(因为有10个搜索数据),如图:

    分析广告规律

    所以我们基于上面的规律简单的编写代码:

    	// ==UserScript==
    	// @name         Remove ad
    	// @namespace    //www.cfage.com
    	// @version      0.1
    	// @description  Remove ads of baidu search results
    	// @author       Sandy
    	// @match        *://www.baidu.com/s*
    	// @grant        none
    	// ==/UserScript==
    
    	(function() {
    
    	    'use strict';
    
    	    function removeAd() {
    
    	        var obj =  document.getElementById("content_left");
    
    	        var tag_obj = obj.children;
    
    	        var obj_length = tag_obj.length;
    
    	        for(var i = 0 ; i < obj_length ; i++) {
    	              //获取每个子元素的 id 值,1-10 之间的保留
    	              //alert(tag_obj[i].getAttribute('id'));
    	              if(!tag_obj[i]) {
    	                 continue;
    	              }
    
    	              var idVal = tag_obj[i].getAttribute('id');
    
    	              if(idVal && idVal >= 1 && idVal <= 10) {
    	                   //obj.removeChild(tag_obj[0]);
    	                   continue;
    	              } else {
    	                  //删除该子元素
    	                  if(tag_obj[i])
    	                     obj.removeChild(tag_obj[i]);
    	                  //删除完后,所有子元素序号又从0开始重新排列
    	                  i = 0;
    	             }
    	       }
    	    }
    
    	    removeAd();
    
    	    //每次点击百度一下重新执行去广告事件
    	    document.getElementById("su").onclick = removeAd;
    
    	})();
    

    当然,上面的代码还是有 bug ,当搜索结果为广告,而且广告 div 里面的 id 值也属于 1-10 的时候,就无法去除广告。

    以上只是简单的举几个例子,你可以根据自己的业务与及要实现的功能编写脚本代码。:)

    本文地址://www.cfage.com/2842.html,转载请注明。

    上一篇:

    下一篇:

    相关推荐

    发表评论

    电子邮件地址不会被公开。 必填项已用*标注

    8 + 8 = ?

    网站地图|广东快乐10分开奖直播

    Copyright © 2015-2019 广东快乐10分开奖直播 All rights reserved.
    闽ICP备15015576号-1,版权所有?psz.

  • 《瘟疫传说》:黑死病恐怖 姐弟在绝望中求生 2019-04-10
  • 陕西国防工业职业技术学院百名大学生志愿者敬老院慰问孤寡老人陕西国防工业职业技术学院百名大学生志愿者敬老院慰问-陕西教育新闻 2019-04-08
  • 西藏拉萨:新家园 新生活 2019-04-08
  • 尊重和保障宗教信仰自由的中国实践 2019-04-06
  • 一敬泯恩仇 俄罗斯队主帅这个动作太暖了 2019-03-20
  • 四大名著剧组首次同台忆往事 经典影视剧如何铸就? 2018-12-07
  • “天眼”凝望 探秘宇宙 2018-12-07
  • 新时时彩和老时时彩有什么区别 新疆时时彩走势图 北京快中彩开奖结果查询 北京快乐8开奖视频 北京赛车pk10网站 大乐透17137期开奖规则 香港六合彩网址大全 足彩 幸运飞艇视频直播 重庆时时彩加减算法 让分胜负和胜负区别 天津时时彩时差 3d极速飞艇 新葡京娱乐城 快乐8彩票 新浪北京单场比分直播百度