0

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

Posted by 撒得一地 on 2018年9月28日 in Chrome插件, 杂谈

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

一款超级好用的插件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 http://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    https://coderschool.cn
	// @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    https://coderschool.cn
	// @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 的时候,就无法去除广告。

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

本文地址:https://coderschool.cn/2842.html,转载请注明。

上一篇:

下一篇:

相关推荐

发表评论

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

5 + 3 = ?

网站地图|XML地图

Copyright © 2015-2018 技术拉近你我! All rights reserved.
闽ICP备15015576号-1,版权所有©psz.