油猴脚本开发总结

一、在线安装

打开浏览器，点击右上角“· · ·”，在弹出的菜单上点击“拓展”跳转到下面这个页面：

点击"获取Microsoft Edge拓展"：

然后搜索框输入“tampermonkey”：

获取最上面这个黑绿色拓展：

二、本地安装

打开浏览器，点击右上角“· · ·”，在弹出的菜单上点击“拓展”跳转到下面这个页面：

将以下的.crx拖到浏览器安装即可。

三、加载脚本

四、全局变量 跨标签页共享变量 的方法

首先在脚本开头加上这两行

// @grant        GM_setValue
// @grant        GM_getValue
// @grant        GM_listValues
// @grant        GM_deleteValue

之后看个例子

(function() {
    'use strict';
 
    // Your code here...
    var a = {
        'name': '兔子昂'
    };
 
    GM_setValue('zw_test', a);
    console.log(GM_getValue('zw_test'));
    console.log(GM_getValue('zw_test').name);

    GM_deleteValue('zw_test')
    var list = GM_listValues()
    for(var j=0;j<list.length;j++){
        GM_deleteValue(list[j])
    }
})();

Chrome 的 console 输出

{name: "兔子昂"}
兔子昂
说明可以方便的将对象存储，并读取，非常方便。

五、获取页面元素方法

当前页面下按F12快捷键，以下图的箭头所示，依次点击，就可以得到元素的javascrip代码，并测试是否元素可以点击等。

document.querySelector("body > box").click()

六、发送httpRequest请求

GM.xmlHttpRequest({
            method: "POST",
            url: 'pathUrl',
            dataType: "json",
            data: JSON.stringify({ "msg": msg, "room": room}),
            headers: {
                "Content-Type": "application/json"
            },
            onload: function(rsp) {
                console.log(rsp)
                console.log('sent ok')
            }
            ,contentType: "application/json"
        });

七、定时启动任务

    
//每隔1分钟
setInterval(start,60000)
function start(){
   var currDate = new Date()
   console.log(currDate);
   console.log(currDate.getHours());
   console.log(currDate.getMinutes());
   if(currDate.getMinutes()==10){
      //your code here

   }
}

八、动作之间的时间停等

(function() {
    'use strict';

const sleep = (timeout) => { return new Promise((resolve) => { setTimeout(() => { resolve(); }, timeout) }) } //睡眠函数用于等待。

//由于sleep函数是异步操作，调用它时需要也是async异步函数
const text_click =async()=> {
     await sleep(4000)  //停等4秒
     //your code here
}

})();

九、使用 scrollTop 和 scrollHeight 滚动到 Div 的底部

//注意div的选择，需要是整个框的div
var element = document.querySelector("div")
element.click()
element.scrollTop = element.scrollHeight

//在查找的过程中，如果整个框的div没有查到内容
document.querySelector("div").innerHTML
null
//需要从上一级div读取，然后再读下一级的框div
document.querySelector("parent_div").querySelector("div")