《关于小白在油猴脚本一天可以学多少这件事》.jpg
## Tampermonkey 脚本制作学习笔记#0x1* 弹窗hollow word 制作:
match 属性：它的作用是匹配网站,*表示通配// @match http://*/*
```` js
// @match https://bbs.tampermonkey.net.cn/
alert('hollow word') //弹窗代码
````
* 自动登录块:
* -模拟输入
```` js
document.querySelector('addr').value=''
ex:document.querySelector('#username_LvR4r').value='8888'
//PS: '#_id' or '.class'
````
*-模拟点击
```` js
document.querySelector("#cookietime_LH0yn").click()
document.querySelector("button.pn.pnc").click()
````
* 视频倍速：只针对h5
1. 检查h5_player
```` js
document.querySelector("video")
````
2. h5的video,里面有一个播放速度的属性:playbackRate,最高为16倍
```` js
document.querySelector('video').playbackRate=2;
````
// 代码解释：@run-at ==>代码抢注
* 脚本ajax跨域访问：
````
先鸽了，没咋看懂
````
* 脚本添加元素
````
enmm,看视频的那一会儿我大概懂了，下来看文字和代码又不懂了，先鸽，后面需要了在过来细看
````
* 外部资源引用
1. 基于油猴 @require 属性 // 可以加MD5校验值
油猴加载
```` js
// @require https://github.com/sandoche/Darkmode.js
````
脚本加载
```` js
let script = document.createElement('script');
script.setAttribute('type', 'text/javascript');
script.src = "https://cdn.jsdelivr.net/npm/vue@2.6.12/dist/vue.min.js";
document.documentElement.appendChild(script);
````
小坑：
1. 沙盒模式：可能由于加载的js文件操纵了window导致js文件发生冲突
2. 原网页；可能由于原网页加载了js文件，与我们加载的js文件发生冲突（建议引用原网页）
区别：require下载到脚本，添加脚本，实时下载
## Tampermonkey 脚本制作学习笔记：0x2
* Jquery脚本（类似一个简易指令插件）：差官方文档
1. 沙盒引用
2. 脚本加载
总结：原网页有就搁沙河加载，没有就原网页加载
* 存储数据：GM_setValue /GM_getValue
```` js
//@grant GM_setValue
//@grant GM_getValue
GM_setValue("123",qqq);
console.log(GM_getValue("123"));
````
* // 右键菜单* 自定义的菜单：(感觉不会用到，用到了在过来看)
```` js
//@run-at context -menu
alert("checked")
````
* GM_addStyle使用：去广告
基本原理：GM_addStyle函数是添加CSS到网页中
创建了一个style元素标签，并且将函数内容插入到网页当中
使用：
```js
if(weburl.indexOf('www.imomoe.ai')!=-1)
{
GM_addStyle('#HMRichBox{display:none !important}')
GM_addStyle('#bdshare{display:none !important}')
}
```
!important==>增加权重 | 添加多条规则在第一条规则后用分号隔开
小知识：有点广告是在网页内加载，有的广告是在网页外加载
总结：相比于document.querySelector('').Style.display='none'，更加快捷//准确
）：
iframe匹配问题
````js
document.querySelector('#g_iframe').contentWindow.document.querySelector
````
* 去除百度广告：基于GM_addStyle
获取nodeList
```` js
document.querySelectorAll('#s-top-left .c-font-normal')
//#s-top-left ==>上层 .c-font-normal==>下层
````
1. 循环筛选创建方法for
```` js
let list=document.querySelectorAll('.mnav')
for(let index=0;index<list.length;index++){
let item=list
console.log(item.innerHTML)
if(item.innerHTML!=='贴吧'&&item.innerHTML!=='地图'){
item.remove()
}
````
2. 去除推荐元素
```` js
GM_addStyle('#s-hotsearch-wrapper{display:none !important}')
````
Tampermonkey 脚本制作学习笔记：0x3
* this学习：this可以更好的改变数据结构
1. 函数中的this：函数内的this一般是windows
```` js
function getthis(){console.log(cat对象,this)}
==>undefined
getthis() | getthis.call()
````
2. 对象中的this：不在是原来，要搞对象
```` js
var testthis={showthis:function(){console.log('test对象',this)}}
miaomiaothis.showthis
````
3. 对象转换：call和Apply
例子：
```` js
var cat={name:'小猫',eat:function(){console.log(this.name+'在吃饭')}}
var dog={name:'二哈'}
````
cat 拥有：name、eat-----------------==>cat.eat()-------------------==>小猫在吃饭
dog 拥有；name；但是这个函数在对象中,通过call就可以直接使用这个 对象（函数）
```` js
cat.eat.call(dog)
````
对象this本质上就是：showthis.call(testthis)，后面跟了一个函数，通过调用函数的方式来调用对象
* 简单使用
``` js
var cat={name:'小猫',eat:function(){console.log(this.name+'在吃饭')}}
var dog={name:'小狗',eat:function(){cat.eat.call(this)}}
```
* 箭头函数：this的复用()=>{}
```` js
var cat={
name:'哆来A梦',
eat:function(){
return
()=>{console.log(this.name+'正在吃东西')}
}
}
setInterval(cat.eat(),3000)
````
总结：箭头函数可以使用，对象里的this，但是要在箭头函数外面套上一层function，以免穿透到外面
*
开个贴，方便以后查阅 本帖最后由 bujidao 于 2022-9-11 19:44 编辑
没错，二楼也是我的（抢板凳，bushi，
多谢道哥 (ggnb!!) 的脚本教程！
看哥哥学的这么快还是有一定基础的
推荐看个20-30节哪里看不懂了
就放弃开始实战
后续碰到一个一个问题再来一篇一篇看(还他妈一半没写完
这个文章是论坛大家陆陆续续花了两年才写成的
哥哥纯看完可能也要一年以上
要做好心理准备哦 给哥哥颁发新人进步奖了
期待哪一天能加入开发组 ggnb！ 一天看这么多很快了 好东西啊，正好在学，自学好累 李恒道 发表于 2022-9-11 20:45
看哥哥学的这么快还是有一定基础的
推荐看个20-30节哪里看不懂了
就放弃开始实战
谢谢哥哥，我就放假学一下 bujidao 发表于 2022-9-12 14:38
谢谢哥哥，我就放假学一下
哥哥加油！
期待哥哥写出来第一个脚本 哥哥加油
页:
[1]