论坛 › 脚本开发 › [油猴脚本开发指南]去除网页广告以及判断去除元素

李恒道 发表于 2021-6-24 21:29:07

[油猴脚本开发指南]去除网页广告以及判断去除元素

# 简介

本节课我们学习去除百度首页的广告，并且消除掉一些元素。

# 简易去除广告

首先我们找到下面的广告id是s_main


书写代码

```
GM_addStyle('#s_main{display:none !important}')
```

但是这个时候发现还存在滚轴，这个时候通常是因为有某些元素设置了最小高度导致的

我们可以直接选择元素点击一下，找到了


将其设置为auto即为默认

```
GM_addStyle('#head{min-height:auto !important}')
```

我们接下来查看代码，发现虽然滚轴变成灰色的了，但是依然存在


这个时候可以排查是否一些上层元素存在scroll等css属性存在，经过排查，在html上找到了overflow-y，这个需要改为hidden才可以隐藏，具体某个值可以直接双击页面上的css属性进行更改。


接下来我们就得到了一个相对干净的百度，这个输入框有点太靠上了，可以挪下去一点


我们通过元素选择找到了


修改height或者min-height都是可以的

再找到图标，将图标与按钮稍稍分离一点


这个时候我们可以使用margin-bottom属性进行分割

书写代码

```
GM_addStyle('#lg{margin-bottom: 40px; !important}')
```


我们就得到了一个相对干净的百度了，接下来对左上角的元素进行清理


我们查看元素可能发现class都是一致的，这个时候我们可以使用querySelectorAll获取全部的元素，然后循环元素数组，通过innerHTML判断我们想要删除那个(注意，返回的并非一个数组，而是一个节点列表，虽然与数组相似，但是不要对其进行删除等操作！)

document.querySelectorAll('.mnav')

然后使用for进行循环
//执行流程:
首先运行第一个参数内语句，然后进入循环流程

对第二个参数进行判断，如果为真则执行{}内语句，执行结束后运行第三个参数内语句，并在此运行第二个参数语句进行判断是否进入执行流程，以此反复
我们可以书写代码


并且查看输出


我个人比较喜欢贴吧和地图，所以对其他进行删除，可以对元素使用remove来删除元素


接下来我们就得到了一个干净的百度

脚本地址https://bbs.tampermonkey.net.cn/forum.php?mod=viewthread&tid=689


王一之 发表于 2021-6-24 22:43:42

ad工具也可以

水凛子 发表于 2021-6-25 11:42:54

研究研究

涛之雨 发表于 2021-8-26 08:50:37

{:4_111:}哈尔滨
太远了py不到

李恒道 发表于 2021-8-26 09:08:15

涛之雨 发表于 2021-8-26 08:50
哈尔滨
太远了py不到

疏忽了，忘了有地区
{:4_110:}不过我可以去py哥哥

我觉得哥哥比我强很多的！

涛之雨 发表于 2021-8-26 21:25:28

本帖最后由 涛之雨 于 2021-8-26 21:26 编辑

李恒道 发表于 2021-8-26 09:08
疏忽了，忘了有地区
不过我可以去py哥哥


https://p.pstatp.com/origin/pgc-image/4dae9e5fad4f4c16a079ad2605c27f61

好多东西不会的。。。
现在在研究把自己代码扔到shadowroot，
不会和外界代码互相影响

主要vue（及其各种框架）css样式的注入效果简直太强了。。。
注入的网页全局样式遭殃。。。
iframe又不方便（而且iframe也做不出来一个半透明遮罩的效果）
所以只能考虑怎么把它扔到shadowroot里了
https://p.pstatp.com/origin/pgc-image/3ed00e117f7744b793bedd81072df1a8
vue的植入简直是噩梦
（不管是油猴脚本还是chrome插件的content_script）

李恒道 发表于 2021-8-26 22:24:08

涛之雨 发表于 2021-8-26 21:25
好多东西不会的。。。
现在在研究把自己代码扔到shadowroot，
不会和外界代码互相影响


{:4_86:}哥哥研究出来成果能论坛发一份让大家参观一下么
呜呜呜呜
我想看哥哥帅气的身影

涛之雨 发表于 2021-8-27 10:11:25

李恒道 发表于 2021-8-26 22:24
哥哥研究出来成果能论坛发一份让大家参观一下么
呜呜呜呜
我想看哥哥帅气的身影 ...

https://p.pstatp.com/origin/pgc-image/03caf6d3f1054b618b69ddca85c143dd

不存在的了。。我已经好久没继续撸码了。。
vue这个css简直是毒瘤（而且我现在写的是chrome插件）

还没出生就胎死腹中了

tongwudi45 发表于 2024-4-25 10:29:28

本帖最后由 tongwudi45 于 2024-4-25 11:17 编辑

用up的这个思路想改一下学校网页显示比例和布局，
比如：一、一个页面分了六个区域，我想改六个区域的位置；
二、一个区域的有多个单选框，我想改他们的顺序和位置。请问我该看些什么来学习一下呢，up给我推荐的资料吧 谢谢了

李恒道 发表于 2024-4-25 15:06:16

tongwudi45 发表于 2024-4-25 10:29
用up的这个思路想改一下学校网页显示比例和布局，
比如：一、一个页面分了六个区域，我想改六个区域的位置 ...

这个可能比哥哥想得复杂
改变布局可能影响到原本的很多逻辑
一般情况下如果工作量不大更推荐重写了

查看完整版本: [油猴脚本开发指南]去除网页广告以及判断去除元素