javascript auto clicker

clicker.js

(function() {
    // 1. Setup the Global Controller
    // If one already exists, abort it first to cleanup old listeners
    if (window.clickerController) {
        window.clickerController.abort();
    }
    window.clickerController = new AbortController();
    const { signal } = window.clickerController;
    
    const old = window.box;
    if (old) {
        old.parentElement.removeChild(old);
    }
    
    // 1. Create the Draggable Container
    const box = document.createElement('div');
    window.box = box;
    box.id = 'autoclick';
    Object.assign(box.style, {
        position: 'fixed',
        top: '20px',
        left: '20px',
        padding: '50px',
        background: 'rgba(34, 34, 34, 0.5)',
        color: '#0f0', // Matrix green for high visibility
        fontFamily: 'monospace',
        fontSize: '12px',
        zIndex: '10000',
        borderRadius: '5px',
        cursor: 'move',
        boxShadow: '0 4px 15px rgba(0,0,0,0.5)',
        userSelect: 'none',
        border: '1px solid #444'
    });

    // Defining the Green Arrow SVG String
    const arrowSvg = `
        <svg width="15" height="15" viewBox="0 0 100 100" style="position: absolute; top: 0; left: 0;">
            <polygon points="0,0 100,0 0,100" fill="#0f0" id="corner-tri" />
        </svg>
    `;

    // 2. Add content areas
    box.innerHTML = `
        ${arrowSvg}
        <div>
            <span id="label-pos">0, 0</span>
            <span id="hover-div"></span>
        </div>
    `;
    document.body.appendChild(box);

    const labelPosEl = box.querySelector('#label-pos');

    // 3. Update coordinates
    const updateLabelPos = () => {
        const rect = box.getBoundingClientRect();
        labelPosEl.innerText = `${Math.round(rect.left)}, ${Math.round(rect.top)}`;
    };

    const mainTabs = document.getElementById('mainTabs');
    const enableClicker = (abEnable) => {
        box.style.color = !abEnable ? '#0f0' : '#fff';
        clickerEnabled = abEnable;
        console.log(`enableClicker: ${abEnable}`);
        
        if (abEnable) {
            const rect = box.getBoundingClientRect();
            clickEl = document.elementFromPoint(Math.round(rect.left)-1, Math.round(rect.top)-1)
            
            // Start observing the body for child removals
            observer.observe(mainTabs, { childList: true, subtree: true });
            console.log(`Observing %o`, mainTabs);

            // console.log(`Auto click div ${clickEl.innerText}`);
            document.getElementById("hover-div").innerText = `${clickEl.innerText}`;
            const autoClickHandler = () => {
                if (clickerEnabled) {
                    clickEl.click();
                    clickTimer = setTimeout(autoClickHandler, clickTimeout);
                }
            }
            autoClickHandler();
        } else {
            clearTimeout(holdTimer);
            document.getElementById("hover-div").innerText = ``;
        }
    };
    
    // Initial position update
    updateLabelPos();

    // 4. Drag Logic
    let isDragging = false;
    let offsetX, offsetY;
    let dragStartX, dragStartY;
    let clickerEnabled = false;
    let holdTimer, clickTimer;
    let clickTimeout = 10;
    let clickEl = null;

    box.addEventListener('mousedown', (e) => {
        isDragging = true;
        offsetX = e.clientX - box.offsetLeft;
        offsetY = e.clientY - box.offsetTop;
        dragStartX = e.clientX;
        dragStartY = e.clientY;
        box.style.opacity = '0.7';
    }, { signal });

    box.addEventListener("contextmenu", function (event) {
        event.preventDefault(); // prevents the default browser menu
        enableClicker(!clickerEnabled);
    }, { signal });

    window.addEventListener('mousemove', (e) => {
        if (!isDragging) return;
        box.style.left = (e.clientX - offsetX) + 'px';
        box.style.top = (e.clientY - offsetY) + 'px';
        updateLabelPos();

        if (e.clientX - dragStartX > 5 ||
           e.clientY - dragStartY > 5) {
            enableClicker(false);
           }
    }, { signal });

    window.addEventListener('mouseup', () => {
        isDragging = false;
        box.style.opacity = '1';
    }, { signal });

    window.addEventListener('scroll', () => {
        updateLabelPos(); // Refresh coordinates
        enableClicker(false);
    }, { passive: true, signal });

    // MutationObserver to detect when clicked element is deleted ---
    const observer = new MutationObserver((mutations) => {
        mutations.forEach((mutation) => {
            mutation.removedNodes.forEach((node) => {
                // console.log(`Node removed:%o == %o`, node, clickEl);
                if (node.contains(clickEl)) {
                    console.warn("Clicked element was deleted! Stopping...");
                    enableClicker(false);
                    observer.disconnect();
                }
            });
        });
    });
    signal.addEventListener('abort', () => {
        observer.disconnect();
        console.log("Observer disconnected via signal.");
    });
})();

Bookmarklet:

javascript:(function(){s=document.createElement('script');s.src='https://gist.githack.com/jjcf89/645e8fcc134ffedc41aee4f0e9ae754d/raw/abf1ec68f96e632a2b36b0703918e3499ef646a1/clicker.js?'+Math.random();document.body.appendChild(s);})();