☰

Auto Clicker with Mobile & Desktop Draggable UI

Auto-clicker with a draggable UI that works on desktop and mobile devices too.

  1. // ==UserScript==
  2. // @name         Auto Clicker with Mobile & Desktop Draggable UI
  3. // @namespace    http://tampermonkey.net/
  4. // @version      1.3
  5. // @description  Auto-clicker with a draggable UI that works on desktop and mobile devices too.
  6. // @author       You
  7. // @match        *://*/*
  8. // @grant        none
  9. // @run-at       document-end
  10. // @license MIT
  11. // ==/UserScript==
  12.  
  13. (function () {
  14.     'use strict';
  15.  
  16.     let isClicking = false;
  17.     let interval = 1000;
  18.     let clickInterval;
  19.     let targetElement = null;
  20.  
  21.     // Create panel
  22.     const panel = document.createElement('div');
  23.     panel.style.position = 'fixed';
  24.     panel.style.top = '50px';
  25.     panel.style.left = '50px';
  26.     panel.style.backgroundColor = 'white';
  27.     panel.style.border = '2px solid black';
  28.     panel.style.padding = '10px';
  29.     panel.style.zIndex = '99999';
  30.     panel.style.fontFamily = 'Arial, sans-serif';
  31.     panel.style.boxShadow = '0 0 10px rgba(0,0,0,0.5)';
  32.     panel.style.touchAction = 'none'; // important for mobile drag
  33.     panel.setAttribute('id', 'autoClickerPanel');
  34.  
  35.     panel.innerHTML = `
  36.         <div id="panelHeader" style="font-weight:bold; cursor:move; margin-bottom:8px;">Auto Clicker</div>
  37.         Delay (ms): <input type="number" id="clickDelay" value="1000" style="width: 80px;"><br><br>
  38.         <button id="selectTarget">Select Target</button><br><br>
  39.         <button id="startClicker">Start</button>
  40.         <button id="stopClicker">Stop</button>
  41.     `;
  42.     document.body.appendChild(panel);
  43.  
  44.     // Make panel draggable on both desktop & mobile
  45.     (function makeDraggable(el) {
  46.         const header = document.getElementById('panelHeader');
  47.         let offsetX = 0, offsetY = 0, isDragging = false;
  48.  
  49.         const startDrag = (e) => {
  50.             isDragging = true;
  51.             offsetX = (e.touches ? e.touches[0].clientX : e.clientX) - el.offsetLeft;
  52.             offsetY = (e.touches ? e.touches[0].clientY : e.clientY) - el.offsetTop;
  53.  
  54.             document.addEventListener('mousemove', drag);
  55.             document.addEventListener('mouseup', stopDrag);
  56.             document.addEventListener('touchmove', drag);
  57.             document.addEventListener('touchend', stopDrag);
  58.         };
  59.  
  60.         const drag = (e) => {
  61.             if (!isDragging) return;
  62.             const clientX = e.touches ? e.touches[0].clientX : e.clientX;
  63.             const clientY = e.touches ? e.touches[0].clientY : e.clientY;
  64.             el.style.left = (clientX - offsetX) + 'px';
  65.             el.style.top = (clientY - offsetY) + 'px';
  66.         };
  67.  
  68.         const stopDrag = () => {
  69.             isDragging = false;
  70.             document.removeEventListener('mousemove', drag);
  71.             document.removeEventListener('mouseup', stopDrag);
  72.             document.removeEventListener('touchmove', drag);
  73.             document.removeEventListener('touchend', stopDrag);
  74.         };
  75.  
  76.         header.addEventListener('mousedown', startDrag);
  77.         header.addEventListener('touchstart', startDrag);
  78.     })(panel);
  79.  
  80.     // Event Listeners
  81.     document.getElementById('selectTarget').addEventListener('click', () => {
  82.         alert('Tap the element you want to auto-click.');
  83.         document.body.style.cursor = 'crosshair';
  84.  
  85.         const onClick = (e) => {
  86.             e.preventDefault();
  87.             e.stopPropagation();
  88.             targetElement = e.target;
  89.             document.body.style.cursor = 'default';
  90.             document.removeEventListener('click', onClick, true);
  91.             alert('Target selected: ' + targetElement.tagName);
  92.         };
  93.  
  94.         document.addEventListener('click', onClick, true);
  95.     });
  96.  
  97.     document.getElementById('startClicker').addEventListener('click', () => {
  98.         if (!targetElement) {
  99.             alert('No target selected!');
  100.             return;
  101.         }
  102.         if (isClicking) return;
  103.         interval = parseInt(document.getElementById('clickDelay').value);
  104.         isClicking = true;
  105.         clickInterval = setInterval(() => {
  106.             try {
  107.                 targetElement.click();
  108.             } catch (err) {
  109.                 console.error('Click failed:', err);
  110.             }
  111.         }, interval);
  112.     });
  113.  
  114.     document.getElementById('stopClicker').addEventListener('click', () => {
  115.         isClicking = false;
  116.         clearInterval(clickInterval);
  117.     });
  118.  
  119. })();