油猴脚本编写基础

前端就像一个任人打扮的小姑娘。

点击“添加新脚本” ，即可进入脚本编写界面，会自动生成下面的模板。

// ==UserScript==
// @name         New Userscript
// @namespace    http://tampermonkey.net/
// @version      0.1
// @description  try to take over the world!
// @author       You
// @match        xxxxxxxxxxxxxxxxxxx
// @icon         https://www.google.com/s2/favicons?sz=64&domain=baidu.com
// @grant        none
// ==/UserScript==

(function() {
    'use strict';

    // Your code here...
})();

这些注释中的内容记录了脚本的信息，可以把它们改成自己需要的内容。

在function里，编写你需要的代码即可。那么，应该怎么编写代码达到想要的效果呢？下面举几个简单的例子来说明一下。

去除元素

 这是优快云首页，如果想要把广告去掉，可以依照以下步骤来做。

1. 在广告上右键，点击“检查”。
2. 让鼠标悬停在不同的层级上，会发现这些元素会对应地在网页上用蓝色框显示出来，很方便就能找到我们想要的元素。
3. 最终，我们找到了想要删除的元素，是id为kp_box_www_swiper的div，接下来就要找到并且删除它。
4. 选中这个元素，右键，点击“复制”中的“复制selector”，会发现复制了“#kp_box_www_swiper”，这就是标识这个元素的方法。
5. 清除它的思路就是：用qureySelector找到它，然后调用remove函数清除，具体代码如下

// ==UserScript==
// @name         优快云首页广告去除（示例用）
// @namespace    http://tampermonkey.net/
// @version      0.1
// @description  优快云 homepage ad
// @author       whin@优快云
// @match        https://www.youkuaiyun.com/
// @icon         https://g.csdnimg.cn/static/logo/favicon32.ico
// @grant        none
// ==/UserScript==

(function() {
    'use strict';

    document.querySelector("#kp_box_www_swiper").remove();
})();

启用了这个脚本，它会在每次加载csdn首页的时候调用写的函数，去除AD。

TemperMonkey脚本，本质上就是油猴在加载网页的时候自动帮我们执行了一个js函数，编写脚本也就是在编写前端的js，需要对html有一定了解，通过js去操作DOM，来做一些想要自动化完成的事。