油猴脚本：油猴脚本自动点击 | 自动检测元素并点击、休眠、顺序执行、单页面也适用

实现目标：油猴脚本自动点击 | 检测元素并点击、休眠、顺序执行、填充表单、单页面也适用

原理：使用setInterval函数检测元素是否存在，使用Promise链式调用实现顺序执行，

自动脚本：

  //休眠
  sleep(1)
    //百度首页
    .then(() => obsPage('www.baidu.com'))
    //休眠
    .then(() => sleep(1))
    //监测存在元素然后点击
    .then(() => obsClick('#s-top-left > a:nth-child(1)'))

效果截图：

完整代码：

// ==UserScript==
// @name         1_test_auto
// @namespace    http://tampermonkey.net/
// @version      0.1
// @description  auto click
// @author       stumpx
// @match        http*://www.baidu.com/*
// @grant        GM_getValue
// @grant        GM_setValue
// ==/UserScript==

(function () {
  'use strict';

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

  /**
   * 监测页面地址
   * @param path    页面地址片段
   * @param desc
   * @returns {Promise<unknown>}
   */
  function obsPage(path, desc = 'page') {
    return new Promise(resolve => {
      //obs page
      let page = setInterval(() => {
        if (location.href.search(path) > -1) {
          clearInterval(page)
          console.log(desc, path)
          resolve(path)
        } else {
          return
        }
      }, 100)
    })
  }

  /**
   * 监测input节点设置内容
   * @param selector    CSS选择器
   * @param text        设置的内容
   * @param desc
   * @returns {Promise<unknown>}
   */
  function obsValue(selector, text, desc = 'value') {
    return new Promise(resolve => {
      //obs node
      let timer = setInterval(() => {
        let target = document.querySelector(selector)
        if (!!target) {
          clearInterval(timer)
          target.value = text
          console.log(desc, text)
          resolve(selector)
        } else {
          return
        }
      }, 100)
    })
  }

  /**
   * 监测到节点后点击
   * @param selector    CSS选择器
   * @param desc
   * @returns {Promise<unknown>}
   */
  function obsClick(selector, desc = 'click') {
    return new Promise(resolve => {
      //obs node
      let timer = setInterval(() => {
        let target = document.querySelector(selector)
        if (!!target) {
          clearInterval(timer)
          target.click()
          console.log(desc, selector)
          resolve(selector)
        } else {
          return
        }
      }, 100)
    })
  }

  /**
   * 监测节点是否存在
   * @param selector    CSS选择器
   * @param desc
   * @returns {Promise<unknown>}
   */
  function obsHas(selector, desc = 'has') {
    return new Promise(resolve => {
      //obs node
      let timer = setInterval(() => {
        let target = document.querySelector(selector)
        if (!!target) {
          clearInterval(timer)
          console.log(desc, selector)
          resolve(selector)
        } else {
          return
        }
      }, 100)
    })
  }

  /**
   * 监测节点内容
   * @param selector    CSS选择器
   * @param text        节点内容
   * @param desc
   * @returns {Promise<unknown>}
   */
  function obsText(selector, text, desc = 'text') {
    return new Promise(resolve => {
      //obs node
      let timer = setInterval(() => {
        let target = document.querySelector(selector)
        if (!!target && target.textContent.trim() == text) {
          clearInterval(timer)
          console.log(desc, text)
          resolve(selector)
        } else {
          return
        }
      }, 100)
    })
  }

  /**
   * 监测节点内容点击
   * @param selector    CSS选择器
   * @param text        节点内容
   * @param desc
   * @returns {Promise<unknown>}
   */
  function obsTextClick(selector, text, desc = 'text') {
    return new Promise(resolve => {
      //obs node
      let timer = setInterval(() => {
        let target = document.querySelector(selector)
        if (!!target && target.textContent.trim() == text) {
          clearInterval(timer)
          target.click()
          console.log(desc, text)
          resolve(selector)
        } else {
          return
        }
      }, 100)
    })
  }

  /**
   * 监测节点非内容
   * @param selector    Css选择器
   * @param text        节点内容
   * @param desc
   * @returns {Promise<unknown>}
   */
  function obsNotText(selector, text, 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)
            console.log(desc, text)
            resolve(selector)
          }
        } else {
          return
        }
      }, 100)
    })
  }

  /**
   * 函数返回真继续执行
   * @param func    函数，返回真继续执行
   * @param desc
   * @returns {Promise<unknown>}
   */
  function obsTrueFunc(func, desc = 'func=>true') {
    return new Promise(resolve => {
      if (!!func) {
        let ret = func()
        if (ret) {
          console.log(desc, ret)
          resolve('func=>true')
        }
      }
    })
  }

  /**
   * 执行函数
   * @param func    函数
   * @param desc
   * @returns {Promise<unknown>}
   */
  function obsFunc(func, desc = 'func') {
    return new Promise(resolve => {
      if (!!func) {
        func()
        console.log(desc)
        resolve('func')
      }
    })
  }

  /**
   * 变量为真继续执行
   * @param isTrue    bool变量
   * @param desc
   * @returns {Promise<unknown>}
   */
  function obsTrue(isTrue, desc = 'true') {
    return new Promise(resolve => {
      if (!!isTrue) {
        console.log(desc, isTrue);
        resolve(isTrue)
      }
    })
  }


  //休眠
  sleep(1)
    //百度首页
    .then(() => obsPage('www.baidu.com'))
    //休眠
    .then(() => sleep(1))
    //监测存在元素然后点击
    .then(() => obsClick('#s-top-left > a:nth-child(1)'))

})();

本文链接：

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