[油猴脚本开发指南]使用GM_addStyle去除网页广告
## GM_addStyle介绍GM_addStyle函数是添加CSS到网页中
创建了一个style元素标签,并且将函数内容插入到网页当中
## GM_addStyle使用
这节课我们以樱花动漫网为例子
由于貌似存在好多网站
网站[http://www.yhdm.io/](http://www.yhdm.io/)
网站[http://www.imomoe.ai](http://www.imomoe.ai)
所以这节课我就简单以这两个网站为例子了
首先解决
http://www.imomoe.ai
![图片.png](data/attachment/forum/202102/10/004715yl7htlflt8cplthk.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/300 "图片.png")
首先我们去除一下右下角的广告
用元素定位找到了
![图片.png](data/attachment/forum/202102/10/004820nns2e2vq6qzioelq.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/300 "图片.png")
然后在右边写上display:none发现广告消失了(display是展示的意思,none代表无)
![图片.png](data/attachment/forum/202102/10/004838fk700omvk1v609jz.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/300 "图片.png")
接下来视频两边的广告,可以找到
![图片.png](data/attachment/forum/202102/10/005004pxiaoaaizipm8whx.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/300 "图片.png")
设置display:none就可以了
但是这里我发现一个非常有意思的事情,就是第一个右下角的广告如果不加载,貌似两边的广告也不会加载,所以我就稍微偷一下懒了!
```
if(weburl.indexOf('www.imomoe.ai')!=-1)
{
GM_addStyle('#HMRichBox{display:none !important}')
GM_addStyle('#bdshare{display:none !important}')
}
```
bdshare是分享按钮,我觉得没什么用,就也给去掉了
#是代表id
HMRichBox是名字
我们需要用一个大括号包含我们想写的内容,之间每一个规则都用;来分割,这次只有一个规则,所以也不可加
直接写上display:none就好了
!important是什么意思呢?因为原网页就有display:xxxx,不同的css规则具有不同的高低等级,important通常可以提高到最高等级
这里为了防止原网页的覆盖,所以加上了important
然后我又发现暂停的时候偶尔也会出现广告
确定class为player_pause
但是这时候出现一个问题,就是我们使用GM_addstyle是不好使的
这是为什么?
查看网页发现其实播放器是一个iframe,就是一个网页包含了另一个网页
![图片.png](data/attachment/forum/202102/11/003223srgu4b4u3f8gzd6z.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/300 "图片.png")
那我们应该怎么处理?
骚操作来了,油猴不仅仅会加载在当前页面,如果我们在match填入iframe的链接,也会匹配到ifame内的网页进行处理
首先我添加saas.jialingmm.net/*是不好使的
所以我直接访问了下
https://saas.jialingmm.net/code.php?type=qiyi&vid=5680af4a488b920b2e2bbba3fb8abae3,302725300&userlink=http%3A%2F%2Fwww.imomoe.ai%2Fplayer%2F209-0-0.html&adress=HeiLongJiang
# 如何获取到这个地址
切换作用域打印**window**.**location**.**href**获取到地址
![图片.png](data/attachment/forum/202112/01/192822nr7jrdm4iidp06zt.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/300 "图片.png")
# 如何切换作用域
![图片.png](data/attachment/forum/202112/01/192838v02tizebvtvx2dfx.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/300 "图片.png")
火狐切换
![图片.png](data/attachment/forum/202112/01/192953nmqrqc0kmk4zsg7c.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/300 "图片.png")
谷歌切换
![图片.png](data/attachment/forum/202112/01/193025ao5az5cno72m6mop.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/300 "图片.png")
也可以通过点击iframe切换当前作用域
发现这是一个动态跳转的网页
目前的api链接是api.xiaomingming.org
所以我在match添加// @match api.xiaomingming.org/*
并且写入addstyle
这样http://www.imomoe.ai这个网页就彻底干净了
## 第二个网页的复杂处理
http://www.yhdm.io
右下角的问题相信大家已经知道怎么处理了(为什么都叫樱花动漫,但是域名不同,广告id都踏马相同?)
我们继续谈谈视频内的暂停广告
![图片.png](data/attachment/forum/202102/11/003626mo4l37jl7u0cok1p.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/300 "图片.png")
这里依然使用了iframe
![图片.png](data/attachment/forum/202102/11/003659z4q8p9p9q791oo8o.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/300 "图片.png")
我们访问这个链接依然是http://tup.yhdm.io
所以直接跟上一个网站同理设置就好了
最后附上脚本代码
也可以从https://bbs.tampermonkey.net.cn/thread-270-1-1.html安装
```
// ==UserScript==
// @name 【油猴中文网bbs.tampermonkey.net.cn】樱花去右下角广告以及弹窗
// @namespace http://www.yhdm.io/
// @version 0.1
// @description去除樱花动漫网广告,来源油猴中文网,bbs.tampermonkey.net.cn
// @author 【李恒道】来源油猴中文网,bbs.tampermonkey.net.cn
// @match http://tup.yhdm.io/*
// @match http://www.yhdm.io/*
// @match http://www.imomoe.ai/*
// @match api.xiaomingming.org/*
// @grant GM_addStyle
// @grant unsafeWindow
// @supportURL https://bbs.tampermonkey.net.cn/forum.php?mod=viewthread&tid=270
// @homepage https://bbs.tampermonkey.net.cn/forum.php?mod=viewthread&tid=270
// ==/UserScript==
let weburl=unsafeWindow.location.href
if(weburl.indexOf('api.xiaomingming.org')!=-1)
{
GM_addStyle('#player_pause{display:none !important}')
}
if(weburl.indexOf('tup.yhdm.io')!=-1)
{
GM_addStyle('#img-random-hm1{display:none !important}')
}
if(weburl.indexOf('www.yhdm.io')!=-1)
{
GM_addStyle('#HMRichBox{display:none !important}')
GM_addStyle('#bdshare{display:none !important}')
}
if(weburl.indexOf('www.imomoe.ai')!=-1)
{
GM_addStyle('#HMRichBox{display:none !important}')
GM_addStyle('#bdshare{display:none !important}')
}
```
哥哥牛逼 woc?我的饭碗 我按照你的思路写了一个类似的.
我发现一到播放视频那个iframe的时候,那个iframe就会发生error 403,不知到什么情况.可以帮我看看吗
// ==UserScript==
// @name New Userscript1
// @namespace http://www.yhdm.so/
// @version 0.1
// @descriptiontry to take over the world!
// @author You
// @match http://www.yhdm.so/*
// @match http://tup.yhdm.so/*
// @icon https://www.google.com/s2/favicons?domain=yhdm.so
// @grant unsafeWindow
// @grant GM_addStyle
// ==/UserScript==
(function() {
'use strict';
// Your code here...
let weburl = unsafeWindow.location.href;
if(weburl.indexOf('www.yhdm.so')!= -1){
GM_addStyle('#HMRichBox{display:none !important}');
GM_addStyle('#HMimageright{display:none !important}');
GM_addStyle('#HMimageleft{display:none !important}');
}
if(weburl.indexOf('tup.yhdm.so')!= -1){
GM_addStyle('#img-random-hm1{display:none !important}');
}
})(); 主治医生赵大宝 发表于 2021-9-14 22:21
我按照你的思路写了一个类似的.
我发现一到播放视频那个iframe的时候,那个iframe就会发生error 403,不知到 ...
http://www.yhdm.so/v/5275-8.html
测试了下
你脚本应该是没问题的
错的是世界! 这个api连接想问一下是怎么获取的
为什么选择div的id就不能去广告而imag的可以,都是用display=none
小胖子的梦想 发表于 2021-12-1 18:27
这个api连接想问一下是怎么获取的
更新下了文章,通过打印window.location.href来看地址 小胖子的梦想 发表于 2021-12-1 18:48
为什么选择div的id就不能去广告而imag的可以,都是用display=none
可以看一下是不是地址匹配上了,可能weburl的匹配地址不对劲 请问如果要去除选中类的元素的父元素应该怎么办呢?