Greasy Fork is available in English.
Double/Triple/Quad click with draggable UI + draggable minimized icon
// ==UserScript==
// @name smt better...
// @namespace https://greasyfork.org/users/yourname
// @version 1.3
// @description Double/Triple/Quad click with draggable UI + draggable minimized icon
// @match *://*/*
// @run-at document-start
// @grant none
// ==/UserScript==
(function() {
'use strict';
let enabled = false;
let toggleKey = "KeyG";
let menuVisible = true;
let mode = 2;
let lastClickTime = 0;
const cooldown = 50;
// --- Create UI ---
const ui = document.createElement("div");
ui.style = `
position: fixed;
top: 20px;
left: 20px;
width: 200px;
padding: 12px;
background: rgba(20,20,20,0.85);
color: white;
font-family: sans-serif;
border-radius: 10px;
z-index: 999999999;
backdrop-filter: blur(6px);
border: 1px solid #444;
user-select: none;
transition: opacity 0.2s ease;
`;
ui.innerHTML = `
<div style="font-size:16px; margin-bottom:8px; font-weight:600;">
DoubleClick UI
</div>
<div style="margin-bottom:6px;">
<b>Status:</b> <span id="dc-status" style="color:#f55;">OFF</span>
</div>
<div style="margin-bottom:6px;">
<b>Toggle Key:</b> <span id="dc-key">G</span>
<button id="dc-changekey" style="margin-left:6px;">Change</button>
</div>
<div style="margin-bottom:6px;">
<b>Mode:</b>
<select id="dc-mode">
<option value="2">Double</option>
<option value="3">Triple</option>
<option value="4">Quad</option>
</select>
</div>
<div style="margin-bottom:6px;">
<b>Hide/Show:</b> ArrowDown
</div>
<button id="dc-toggle" style="
width:100%;
padding:6px;
background:#333;
color:white;
border:1px solid #555;
border-radius:6px;
cursor:pointer;
">Enable</button>
`;
document.documentElement.appendChild(ui);
const statusEl = ui.querySelector("#dc-status");
const toggleBtn = ui.querySelector("#dc-toggle");
const keyEl = ui.querySelector("#dc-key");
const changeKeyBtn = ui.querySelector("#dc-changekey");
const modeSelect = ui.querySelector("#dc-mode");
// --- Minimized Icon ---
const mini = document.createElement("div");
mini.textContent = "DC";
mini.style = `
position: fixed;
bottom: 10px;
left: 10px;
width: 32px;
height: 32px;
background: #222;
color: white;
font-weight: bold;
font-size: 14px;
border-radius: 50%;
display: none;
align-items: center;
justify-content: center;
text-align: center;
cursor: pointer;
z-index: 999999999;
border: 1px solid #555;
user-select: none;
`;
document.documentElement.appendChild(mini);
// --- Make minimized icon draggable ---
let dragMini = false, miniX = 0, miniY = 0;
mini.addEventListener("mousedown", e => {
dragMini = true;
miniX = e.clientX - mini.offsetLeft;
miniY = e.clientY - mini.offsetTop;
});
document.addEventListener("mousemove", e => {
if (!dragMini) return;
mini.style.left = (e.clientX - miniX) + "px";
mini.style.top = (e.clientY - miniY) + "px";
});
document.addEventListener("mouseup", () => dragMini = false);
// --- Restore menu by clicking OR ArrowDown ---
mini.onclick = () => toggleMenu(true);
function toggleMenu(show) {
menuVisible = show;
ui.style.opacity = show ? "1" : "0";
ui.style.pointerEvents = show ? "auto" : "none";
mini.style.display = show ? "none" : "flex";
}
// --- Make main UI draggable ---
let dragging = false, offsetX = 0, offsetY = 0;
ui.addEventListener("mousedown", e => {
dragging = true;
offsetX = e.clientX - ui.offsetLeft;
offsetY = e.clientY - ui.offsetTop;
});
document.addEventListener("mousemove", e => {
if (!dragging) return;
ui.style.left = (e.clientX - offsetX) + "px";
ui.style.top = (e.clientY - offsetY) + "px";
});
document.addEventListener("mouseup", () => dragging = false);
// --- UI Logic ---
function updateUI() {
statusEl.textContent = enabled ? "ON" : "OFF";
statusEl.style.color = enabled ? "#5f5" : "#f55";
toggleBtn.textContent = enabled ? "Disable" : "Enable";
}
toggleBtn.onclick = () => {
enabled = !enabled;
updateUI();
};
modeSelect.onchange = () => {
mode = parseInt(modeSelect.value);
};
let waitingForKey = false;
changeKeyBtn.onclick = () => {
waitingForKey = true;
changeKeyBtn.textContent = "Press key...";
};
document.addEventListener("keydown", e => {
if (waitingForKey) {
toggleKey = e.code;
keyEl.textContent = toggleKey.replace("Key", "");
changeKeyBtn.textContent = "Change";
waitingForKey = false;
return;
}
if (e.code === toggleKey) {
enabled = !enabled;
updateUI();
}
if (e.code === "ArrowDown") {
toggleMenu(!menuVisible);
}
});
// --- Improved Click Logic (works on more sites) ---
document.addEventListener("click", function(e) {
if (!enabled) return;
const now = performance.now();
if (now - lastClickTime < cooldown) return;
lastClickTime = now;
for (let i = 0; i < mode - 1; i++) {
const synthetic = new MouseEvent("click", {
bubbles: true,
cancelable: true,
clientX: e.clientX,
clientY: e.clientY
});
e.target.dispatchEvent(synthetic);
}
}, true);
})();