如何开发油猴脚本，简单的编写第一个油猴脚本（一）

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

一款超级好用的插件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，转载请注明。