油猴腳本：油猴腳本自動點擊。測元素並點擊、休眠、順序執行、填充表單

目的：油猴腳本自動點擊 ，檢測元素並點擊、休眠、順序執行、填充表單

原理：使用setInterval函數定時檢測元素是否存在，使用Promise鏈式調用實現順序執行，

更新：2021-10-01 12:09:55

 

自動腳本：

  //休眠
  obsSleep(1)
    //百度首頁
    .then(() => obsIsPage('www.baidu.com'))
    //休眠
    .then(() => obsSleep(1))
    //監測存在元素然后點擊
    .then(() => obsClick('#s-top-left > a:nth-child(1)'))

效果截圖：

 

 

油猴常用函數：

 

/*====== 開始：輔助函數 ======*/

/**
 * 休眠
 * @param time    休眠時間，單位秒
 * @param desc
 * @returns {Promise<unknown>}
 */
function obsSleep(time, desc = 'obsSleep') {
  return new Promise(resolve => {
    //sleep
    setTimeout(() => {
      console.log(desc, time, 's')
      resolve(time)
    }, Math.floor(Math.abs(time) * 1000))
  })
}

/**
 * 監測頁面地址
 * @param path    頁面地址片段
 * @param time    延時，負數：延時->執行，正數：執行->延時
 * @param desc
 * @returns {Promise<unknown>}
 */
function obsIsPage(path, time = 0, desc = 'obsHasPage') {
  return new Promise(resolve => {
    //obs page
    let page = setInterval(() => {
      if (location.href.toLowerCase().indexOf(path.toLowerCase()) > -1) {
        clearInterval(page)
        if (time < 0) {
          setTimeout(() => {
            console.log(desc, path)
            resolve(path)
          }, Math.abs(time) * 1000)
        } else if (time > 0) {
          setTimeout(() => {
            console.log(desc, path)
            resolve(path)
          }, Math.abs(time) * 1000)
        } else {
          console.log(desc, path)
          resolve(path)
        }
      } else {
        return
      }
    }, 100)
  })
}

/**
 * 監測input節點設置內容
 * @param selector    CSS選擇器
 * @param text        設置的內容
 * @param time    延時，負數：延時->執行，正數：執行->延時
 * @param desc
 * @returns {Promise<unknown>}
 */
function obsSetValue(selector, text, time = 0, desc = 'obsSetValue') {
  return new Promise(resolve => {
    //obs node
    let timer = setInterval(() => {
      let target = document.querySelector(selector)
      if (!!target) {
        clearInterval(timer)
        if (time < 0) {
          setTimeout(() => {
            target.value = text
            console.log(desc, text)
            resolve(selector)
          }, Math.abs(time) * 1000)
        } else if (time > 0) {
          target.value = text
          setTimeout(() => {
            console.log(desc, text)
            resolve(selector)
          }, Math.abs(time) * 1000)
        } else {
          target.value = text
          console.log(desc, text)
          resolve(selector)
        }
      } else {
        return
      }
    }, 100)
  })
}

/**
 * 文本框是否有值，如果傳入text且不為空則比較文本框的值
 * @param selector
 * @param text
 * @param time
 * @param desc
 * @returns {Promise<unknown>}
 */
function obsHasValue(selector, text = '', time = 0, desc = 'obsHasValue') {
  return new Promise(resolve => {
    //obs node
    let timer = setInterval(() => {
      let target = document.querySelector(selector)
      if (!!target) {
        clearInterval(timer)
        if (Math.abs(time) > 0) {
          setTimeout(() => {
            console.log(desc, text)
            if (!!text) {
              if (target.value == text) {
                resolve(selector)
              }
            } else {
              if (target.value) {
                resolve(selector)
              }
            }
          }, Math.abs(time) * 1000)
        } else {
          console.log(desc, text)
          if (!!text) {
            if (target.value == text) {
              resolve(selector)
            }
          } else {
            if (target.value) {
              resolve(selector)
            }
          }
        }
      } else {
        return
      }
    }, 100)
  })
}

/**
 * 監測到節點后點擊
 * @param selector    CSS選擇器
 * @param time    延時，負數：延時->執行，正數：執行->延時
 * @param desc
 * @returns {Promise<unknown>}
 */
function obsClick(selector, time = 0, desc = 'obsClick') {
  return new Promise(resolve => {
    //obs node
    let timer = setInterval(() => {
      let target = document.querySelector(selector)
      if (!!target) {
        clearInterval(timer)
        if (time < 0) {
          setTimeout(() => {
            target.click()
            console.log(desc, selector)
            resolve(selector)
          }, Math.abs(time) * 1000)
        } else if (time > 0) {
          target.click()
          setTimeout(() => {
            console.log(desc, selector)
            resolve(selector)
          }, Math.abs(time) * 1000)
        } else {
          target.click()
          console.log(desc, selector)
          resolve(selector)
        }
      } else {
        return
      }
    }, 100)
  })
}

/**
 * 監測節點是否存在
 * @param selector    CSS選擇器
 * @param time    延時，負數：延時->執行，正數：執行->延時
 * @param desc
 * @returns {Promise<unknown>}
 */
function obsHas(selector, time = 0, desc = 'obsHas') {
  return new Promise(resolve => {
    //obs node
    let timer = setInterval(() => {
      let target = document.querySelector(selector)
      if (!!target) {
        clearInterval(timer)
        if (Math.abs(time) > 0) {
          setTimeout(() => {
            console.log(desc, selector)
            resolve(selector)
          }, Math.abs(time) * 1000)
        } else {
          console.log(desc, selector)
          resolve(selector)
        }
      } else {
        return
      }
    }, 100)
  })
}

/**
 * 監測節點是否存在然后執行函數
 * @param selector
 * @param func
 * @param time    延時，負數：延時->執行，正數：執行->延時
 * @param desc
 * @returns {Promise<unknown>}
 */
function obsHasFunc(selector, func, time = 0, desc = 'obsHasFunc') {
  return new Promise(resolve => {
    //obs node
    let timer = setInterval(() => {
      let target = document.querySelector(selector)
      if (!!target) {
        clearInterval(timer)
        if (time < 0) {
          setTimeout(() => {
            if (!!func) {
              func()
            }
            console.log(desc, selector)
            resolve(selector)
          }, Math.abs(time) * 1000)
        } else if (time > 0) {
          if (!!func) {
            func()
          }
          setTimeout(() => {
            console.log(desc, selector)
            resolve(selector)
          }, Math.abs(time) * 1000)
        } else {
          if (!!func) {
            func()
          }
          console.log(desc, selector)
          resolve(selector)
        }
      } else {
        return
      }
    }, 100)
  })
}

/**
 * 監測節點內容
 * @param selector    CSS選擇器
 * @param text        節點內容
 * @param time    延時，負數：延時->執行，正數：執行->延時
 * @param desc
 * @returns {Promise<unknown>}
 */
function obsHasText(selector, text, time = 0, desc = 'obsHasText') {
  return new Promise(resolve => {
    //obs node
    let timer = setInterval(() => {
      let target = document.querySelector(selector)
      if (!!target && target.textContent.trim() == text) {
        clearInterval(timer)
        if (time < 0) {
          setTimeout(() => {
            console.log(desc, text)
            resolve(selector)
          }, Math.abs(time) * 1000)
        } else if (time > 0) {
          setTimeout(() => {
            console.log(desc, text)
            resolve(selector)
          }, Math.abs(time) * 1000)
        } else {
          console.log(desc, text)
          resolve(selector)
        }
      } else {
        return
      }
    }, 100)
  })
}

/**
 * 監測節點內容點擊
 * @param selector    CSS選擇器
 * @param text        節點內容
 * @param time    延時，負數：延時->執行，正數：執行->延時
 * @param desc
 * @returns {Promise<unknown>}
 */
function obsHasTextClick(selector, text, time = 0, desc = 'text') {
  return new Promise(resolve => {
    //obs node
    let timer = setInterval(() => {
      let target = document.querySelector(selector)
      if (!!target && target.textContent.trim() == text) {
        clearInterval(timer)
        if (time < 0) {
          setTimeout(() => {
            target.click()
            console.log(desc, text)
            resolve(selector)
          }, Math.abs(time) * 1000)
        } else if (time > 0) {
          target.click()
          setTimeout(() => {
            console.log(desc, text)
            resolve(selector)
          }, Math.abs(time) * 1000)
        } else {
          target.click()
          console.log(desc, text)
          resolve(selector)
        }
      } else {
        return
      }
    }, 100)
  })
}

/**
 * 監測節點非內容
 * @param selector    Css選擇器
 * @param text        節點內容
 * @param time    延時，負數：延時->執行，正數：執行->延時
 * @param desc
 * @returns {Promise<unknown>}
 */
function obsNotText(selector, text, time = 0, desc = 'not text') {
  return new Promise(resolve => {
    //obs node
    let timer = setInterval(() => {
      let target = document.querySelector(selector)
      if (!!target) {
        if (target.textContent.trim() == text) {
          return
        } else {
          clearInterval(timer)
          if (time < 0) {
            setTimeout(() => {
              console.log(desc, text)
              resolve(selector)
            }, Math.abs(time) * 1000)
          } else if (time > 0) {
            setTimeout(() => {
              console.log(desc, text)
              resolve(selector)
            }, Math.abs(time) * 1000)
          } else {
            console.log(desc, text)
            resolve(selector)
          }
        }
      } else {
        return
      }
    }, 100)
  })
}

/**
 * 函數返回真繼續執行
 * @param func    函數，返回真繼續執行
 * @param time    延時，負數：延時->執行，正數：執行->延時
 * @param desc
 * @returns {Promise<unknown>}
 */
function obsTrueFunc(func, time = 0, desc = 'func=>true') {
  return new Promise(resolve => {
    if (!!func) {
      if (time < 0) {
        setTimeout(() => {
          let ret = func()
          if (ret) {
            console.log(desc, ret)
            resolve('func=>true')
          }
        }, Math.abs(time) * 1000)
      } else if (time > 0) {
        let ret = func()
        setTimeout(() => {
          if (ret) {
            console.log(desc, ret)
            resolve('func=>true')
          }
        }, Math.abs(time) * 1000)
      } else {
        let ret = func()
        if (ret) {
          console.log(desc, ret)
          resolve('func=>true')
        }
      }
    }
  })
}

/**
 * 執行函數
 * @param func    函數
 * @param time    延時，負數：延時->執行，正數：執行->延時
 * @param desc
 * @returns {Promise<unknown>}
 */
function obsFunc(func, time = 0, desc = 'func') {
  return new Promise(resolve => {
    if (!!func) {
      if (time < 0) {
        setTimeout(() => {
          func()
          console.log(desc)
          resolve('func')
        }, Math.abs(time) * 1000)
      } else if (time > 0) {
        func()
        setTimeout(() => {
          console.log(desc)
          resolve('func')
        }, Math.abs(time) * 1000)
      } else {
        func()
        console.log(desc)
        resolve('func')
      }
    }
  })
}

/**
 * 變量為真繼續執行
 * @param isTrue    bool變量
 * @param time    延時，負數：延時->執行，正數：執行->延時
 * @param desc
 * @returns {Promise<unknown>}
 */
function obsTrue(isTrue, time = 0, desc = 'true') {
  return new Promise(resolve => {
    if (!!isTrue) {
      if (time < 0) {
        setTimeout(() => {
          console.log(desc, isTrue);
          resolve(isTrue)
        }, Math.abs(time) * 1000)
      } else if (time > 0) {
        setTimeout(() => {
          console.log(desc, isTrue);
          resolve(isTrue)
        }, Math.abs(time) * 1000)
      } else {
        console.log(desc, isTrue);
        resolve(isTrue)
      }
    }
  })
}

/**
 * 隨機字符串
 * @param e  長度
 * @returns {string}
 */
function randStr(e = 12) {
  e = e || 32;
  // let t = "ABCDEFGHJKMNPQRSTWXYZabcdefhijkmnprstwxyz2345678",
  let t = "abcdefghijkmnprstwxyz",
    a = t.length,
    n = "";
  for (let i = 0; i < e; i++) n += t.charAt(Math.floor(Math.random() * a));
  return n
}

/**
 * 隨機數字
 * @param e  長度
 * @returns {string}
 */
function randNum(e = 12) {
  e = e || 32;
  // let t = "ABCDEFGHJKMNPQRSTWXYZabcdefhijkmnprstwxyz2345678",
  let t = "123456789",
    a = t.length,
    n = "";
  for (let i = 0; i < e; i++) n += t.charAt(Math.floor(Math.random() * a));
  return n
}

/**
 * 獲取當前URL地址參數
 * @param name  參數名稱
 * @returns {string|null}
 */
function getUrlParam(name) {
  let reg = new RegExp("(.|&)" + name + "=([^&]*)(&|$)");
  let r = window.location.href.match(reg);
  if (r != null) return unescape(r[2]);
  return null;
}

/**
 * 加載style樣式
 * @param style  style標簽內容
 */
function addStyleEle(style = '') {
  let css = document.createElement('style')
  css.innerHTML = style
  document.body.append(css)
}

/**
 * 加載css文件
 * @param url  css文件地址
 */
function loadCssFile(url) {
  let head = document.getElementsByTagName('head')[0];
  let link = document.createElement('link');
  link.type = 'text/css';
  link.rel = 'stylesheet';
  link.href = url;
  head.appendChild(link);
}

/**
 * 加載js代碼
 * @param code
 */
function addScriptEle(code) {
  let script = document.createElement("script");
  script.type = "text/javascript";
  try {
    // firefox、safari、chrome和Opera
    script.appendChild(document.createTextNode(code));
  } catch (ex) {
    // IE早期的瀏覽器 ,需要使用script的text屬性來指定javascript代碼。
    script.text = code;
  }
  document.getElementsByTagName("head")[0].appendChild(script);
}

/**
 * 加載js文件
 * @param url  js文件路徑
 * @param callback  加載成功后執行的回調函數
 */
function loadJsFile(url, callback) {
  let head = document.getElementsByTagName('head')[0];
  let script = document.createElement('script');
  script.type = 'text/javascript';
  script.src = url;
  if (typeof (callback) == 'function') {
    script.onload = script.onreadystatechange = function () {
      if (!this.readyState || this.readyState === "loaded" || this.readyState === "complete") {
        callback();
        script.onload = script.onreadystatechange = null;
      }
    };
  }
  head.appendChild(script);
}

/**
 * 向頁面中添加div
 * @param className   類名
 * @param innerHtml   內容
 * @param clickFunc   點擊事件函數
 * @returns {HTMLDivElement}
 */
function addDivEle(className = '', innerHtml = '', clickFunc = false, parentSelector = '') {
  // console.log('addDivEle.className', className)
  let div = document.createElement('div')
  div.className = className
  div.innerHTML = innerHtml
  if (typeof clickFunc == 'function') {
    div.onclick = clickFunc
  }
  // console.log('addDivEle.parentSelector', parentSelector)
  if (parentSelector.length > 0) {
    document.querySelector(parentSelector).append(div)
  } else {
    document.body.append(div)
  }
  return div
}

/**
 * 添加工具按鈕
 * @param className   按鈕類名
 * @param innerHtml   按鈕內容
 * @param clickFunc   按鈕點擊事件
 * @param param       {}
 */
function addToolBtn(className = '', innerHtml = '', clickFunc = false, param = {}) {
  let defaultParam = {
    yAlign: 'bottom',
    xAlign: 'left',
    boxSelector: '.monkeyToolBtnBox',
    btnSelector: '.monkeyToolBtn',
    //自定義盒子樣式
    boxCss: '',
    //自定義按鈕樣式
    btnCss: '',
  }
  param = Object.assign({}, defaultParam, param)

  if (param.boxSelector && document.querySelector(param.boxSelector) == null) {
    addDivEle(param.boxSelector.replaceAll('\\.', ' '))
    // return;
    addStyleEle(`
    ${param.boxSelector} {
      position: fixed;
      bottom: 0;
      left: 0;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: flex-start;
      ${param.yAlign == 'top' ? 'top:0;bottom:auto;' : 'top:auto;bottom:0;'}
      ${param.xAlign == 'left' ? 'left:0;right:auto;' : 'left:auto;right:0;align-items: flex-end;'}
      line-height: 1;
      cursor: pointer;
      z-index: 999999;
      font-size: 15px;
      ${param.boxCss}
    }
    ${param.btnSelector} {
      border: 2px solid red;
      color: red;
      padding: 5px 10px;
      background: white;
      font-size: 15px;
      ${param.btnCss}
    }
  `)
  }
  addStyleEle(`
  ${param.btnSelector}.${className} {
    cursor: pointer;
    ${param.btnCss}
  }
  `)
  addDivEle(`${param.btnSelector.replaceAll('\\.', ' ')} ${className}`, innerHtml, clickFunc, param.boxSelector)
}

/**
 * 移除iframe頁面元素，用於wifi劫持和去除iframe廣告
 */
function removeIframe() {
  let filter = new Object();
  filter.ad = function () {
    let tar = document.getElementsByTagName('iframe');
    let len = tar.length;
    if (len > 0) {
      for (let i = 0; i < len; i++) {
        tar[0].remove()
      }
    }
  }
  filter.timer = function () {
    let clean = setInterval(function () {
      if (document.getElementsByTagName('iframe').length == 0) {
        clearInterval(clean)
        console.log('清除')
      } else {
        filter.ad()
      }
    }, 300)
  }
  filter.timer()
}

/**
 * 時間格式化
 * @param fmt  格式，yyyy-MM-dd hh:mm:ss.S
 * @returns {*}   時間字符串，2006-07-02 08:09:04.423
 * @constructor
 */
Date.prototype.format = function (fmt) { //author: meizz
  let o = {
    "M+": this.getMonth() + 1, //月份
    "d+": this.getDate(), //日
    "h+": this.getHours(), //小時
    "m+": this.getMinutes(), //分
    "s+": this.getSeconds(), //秒
    "q+": Math.floor((this.getMonth() + 3) / 3), //季度
    "S": this.getMilliseconds() //毫秒
  };
  if (/(y+)/.test(fmt)) fmt = fmt.replace(RegExp.$1, (this.getFullYear() + "").substr(4 - RegExp.$1.length));
  for (let k in o)
    if (new RegExp("(" + k + ")").test(fmt)) fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) : (("00" + o[k]).substr(("" + o[k]).length)));
  return fmt;
}

/**
 * 替換全部匹配到的內容
 * @param FindText  需要查找的字符串
 * @param RepText   將要替換的字符串
 * @returns {string}
 */
String.prototype.replaceAll = function (FindText, RepText) {
  let regExp = new RegExp(FindText, "g");
  return this.replace(regExp, RepText);
}

/**
 * 隨機獲取一個元素
 * @returns {*}
 */
Array.prototype.sample = function () {
  return this[Math.floor(Math.random() * this.length)]
}

/*====== 結束：輔助函數 ======*/
/*====== 你的代碼 ======*/

 

======

本文鏈接：

https://www.cnblogs.com/stumpx/p/13476123.html

======