油猴脚本开发学习（一）

Hello_Tom
873 阅读2分钟

持续创作，加速成长！这是我参与「掘金日新计划 · 10 月更文挑战」的第7天，点击查看活动详情

前言

作为一个油猴脚本重度依赖用户，很喜欢它带来的便利，例如：去除繁杂的广告、自动化处理信息、破解一些网站的限制。但有时自己有些定义化的需求，脚本网站上的并没有覆盖到，因此下面就来学习油猴脚本开发啦~

安装地址：Tampermonkey • 首页

这个只要你的浏览器是主流浏览器都是没有问题的~

油猴脚本开发

当你打开一段脚本时就会看到相关的元信息，例如下表

// ==UserScript==
// @name         脚本名
// @namespace    命名空间,油猴使用@namespace+@name作为脚本的唯一标识,如果相同则会覆盖,通常默认即可
// @version      版本号
// @description  脚本描述
// @author       作者名
// @match        脚本匹配网址,支持通配符
// @icon         脚本图标,最好32*32
// @grant        特殊API授权（后面在介绍）
// ==/UserScript==

在大致了解相关的模板后，就来小试牛刀一下，假设我们希望脚本能够去除广告，这里以juejin首页为例，将这些广告隐藏掉。

image-20221003225214632

在确定需求后，我利用我匮乏的前端知识思考了一下，主要步骤就是

  1. 获得广告对应的元素信息
  2. 将广告元素信息设为不可见

通过F12大法观察一下

image-20221003225912479

可以发现广告元素的class属性值都为sidebar-block banner-block，那么我们通过DOM getElementsByClassName()的方法获得元素列表即可，随后再将他们的style.display属性设为不可见即可~

// ==UserScript==
// @name         掘金广告去除
// @namespace    http://tampermonkey.net/
// @version      0.1
// @description  简单掘金广告去除
// @author       You
// @match        https://juejin.cn/
// @icon         https://www.google.com/s2/favicons?sz=64&domain=juejin.cn
// @grant        none
// ==/UserScript==
​
(function() {
document.onreadystatechange=function(){
    var list = document.getElementsByClassName("sidebar-block banner-block");
    console.log(list)
    for(var i = 0; i<list.length;i++){
        list[i].style.display = "none";
    }
}
})();

需要注意需要在dom元素加载完后在执行相关脚本，不然会导致getElementsByClassName无法找到相关的广告元素，在这里我是使用onreadystatechange的回调函数来实现的~（在某些情况下也会失败）。

随后添加进油猴脚本中，可以看到广告元素不见啦~

\

avatar
文章
阅读
粉丝