您需要先安装一个扩展,例如 篡改猴、Greasemonkey 或 暴力猴,之后才能安装此脚本。
您需要先安装一个扩展,例如 篡改猴 或 暴力猴,之后才能安装此脚本。
您需要先安装一个扩展,例如 篡改猴 或 暴力猴,之后才能安装此脚本。
您需要先安装一个扩展,例如 篡改猴 或 Userscripts ,之后才能安装此脚本。
您需要先安装一款用户脚本管理器扩展,例如 Tampermonkey,才能安装此脚本。
您需要先安装用户脚本管理器扩展后才能安装此脚本。
Displays the keys being pressed on the screen with customization options, positioning, and a toggleable GUI via the 'H' key.
- // ==UserScript==
- // @name Key Press Display
- // @namespace http://tampermonkey.net/
- // @version 0.9
- // @description Displays the keys being pressed on the screen with customization options, positioning, and a toggleable GUI via the 'H' key.
- // @author Arjun
- // @grant none
- // @match https://shellshock.io/
- // @license GPL 3.0
- // ==/UserScript==
- (function() {
- 'use strict';
- const keyDisplayDiv = document.createElement('div');
- keyDisplayDiv.style.position = 'fixed';
- keyDisplayDiv.style.top = '10px';
- keyDisplayDiv.style.right = '10px';
- keyDisplayDiv.style.backgroundColor = 'rgba(0, 0, 0, 0.7)';
- keyDisplayDiv.style.color = 'white';
- keyDisplayDiv.style.padding = '10px';
- keyDisplayDiv.style.borderRadius = '8px';
- keyDisplayDiv.style.fontFamily = 'Arial, sans-serif';
- keyDisplayDiv.style.fontSize = '20px';
- keyDisplayDiv.style.zIndex = '9999';
- keyDisplayDiv.style.textAlign = 'center';
- keyDisplayDiv.style.cursor = 'move'; // Set cursor to move
- document.body.appendChild(keyDisplayDiv);
- const guiDiv = document.createElement('div');
- guiDiv.style.position = 'fixed';
- guiDiv.style.bottom = '10px';
- guiDiv.style.right = '50%';
- guiDiv.style.transform = 'translateX(50%)';
- guiDiv.style.backgroundColor = 'rgba(0, 0, 0, 0.7)';
- guiDiv.style.color = 'white';
- guiDiv.style.padding = '15px';
- guiDiv.style.borderRadius = '10px';
- guiDiv.style.fontFamily = 'Arial, sans-serif';
- guiDiv.style.fontSize = '14px';
- guiDiv.style.zIndex = '10000';
- guiDiv.style.width = '240px';
- guiDiv.style.boxShadow = '0px 4px 10px rgba(0, 0, 0, 0.3)';
- guiDiv.style.transition = 'opacity 0.3s ease';
- guiDiv.style.textAlign = 'center';
- guiDiv.style.cursor = 'move'; // Set cursor to move
- guiDiv.innerHTML = `
- <label for="bgColor">Background:</label><br>
- <input type="color" id="bgColor" value="#000000" style="border-radius: 5px; padding: 5px; border: none;"><br><br>
- <label for="fontColor">Font Color:</label><br>
- <input type="color" id="fontColor" value="#FFFFFF" style="border-radius: 5px; padding: 5px; border: none;"><br><br>
- <label for="fontSize">Font Size: <span id="fontSizeValue">20</span>px</label><br>
- <input type="range" id="fontSize" min="10" max="50" value="20" style="width: 100%; border-radius: 5px;"><br><br>
- <label for="position">Position:</label><br>
- <select id="position" style="border-radius: 5px; padding: 5px; width: 100%; border: none; background-color: rgba(255, 255, 255, 0.1); color: white;">
- <option value="top-right">Top Right</option>
- <option value="top-left">Top Left</option>
- <option value="bottom-right">Bottom Right</option>
- <option value="bottom-left">Bottom Left</option>
- <option value="center">Center</option>
- <option value="top-center">Top Center</option>
- <option value="bottom-center">Bottom Center</option>
- </select><br><br>
- <button id="closeGui" style="padding: 10px; width: 100%; background-color: rgba(255, 255, 255, 0.2); border: none; border-radius: 8px; color: white; cursor: pointer;">Close GUI[H]</button>
- `;
- document.body.appendChild(guiDiv);
- const pressedKeys = new Set();
- let capsLockActive = false;
- let isGuiVisible = false;
- document.addEventListener('keydown', (event) => {
- if (isTyping()) return; // Prevent logging while typing
- if (event.key === 'CapsLock') {
- capsLockActive = !capsLockActive;
- displayCapsLock();
- } else if (event.key === 'h' || event.key === 'H') { // Toggle GUI on "H" key press
- toggleGuiVisibility();
- } else {
- pressedKeys.add(event.key);
- }
- updateDisplay();
- });
- document.addEventListener('keyup', (event) => {
- if (isTyping()) return; // Prevent logging while typing
- if (event.key !== 'CapsLock') {
- pressedKeys.delete(event.key);
- }
- updateDisplay();
- });
- // Function to check if the user is typing in an input field
- function isTyping() {
- const activeElement = document.activeElement;
- return activeElement.tagName === 'INPUT' || activeElement.tagName === 'TEXTAREA' || activeElement.isContentEditable;
- }
- // Toggle GUI visibility function
- function toggleGuiVisibility() {
- if (isGuiVisible) {
- guiDiv.style.opacity = '0';
- setTimeout(() => guiDiv.style.display = 'none', 300);
- } else {
- guiDiv.style.display = 'block';
- setTimeout(() => guiDiv.style.opacity = '1', 10);
- }
- isGuiVisible = !isGuiVisible;
- }
- const bgColorInput = document.getElementById('bgColor');
- const fontColorInput = document.getElementById('fontColor');
- const fontSizeInput = document.getElementById('fontSize');
- const fontSizeValue = document.getElementById('fontSizeValue');
- const positionSelect = document.getElementById('position');
- const closeGuiButton = document.getElementById('closeGui');
- bgColorInput.addEventListener('input', () => {
- keyDisplayDiv.style.backgroundColor = bgColorInput.value;
- });
- fontColorInput.addEventListener('input', () => {
- keyDisplayDiv.style.color = fontColorInput.value;
- });
- fontSizeInput.addEventListener('input', () => {
- const fontSize = fontSizeInput.value;
- keyDisplayDiv.style.fontSize = fontSize + 'px';
- fontSizeValue.textContent = fontSize;
- });
- positionSelect.addEventListener('change', () => {
- switch (positionSelect.value) {
- case 'top-right':
- keyDisplayDiv.style.top = '10px';
- keyDisplayDiv.style.right = '10px';
- keyDisplayDiv.style.bottom = '';
- keyDisplayDiv.style.left = '';
- keyDisplayDiv.style.transform = '';
- break;
- case 'top-left':
- keyDisplayDiv.style.top = '10px';
- keyDisplayDiv.style.left = '10px';
- keyDisplayDiv.style.bottom = '';
- keyDisplayDiv.style.right = '';
- keyDisplayDiv.style.transform = '';
- break;
- case 'bottom-right':
- keyDisplayDiv.style.bottom = '10px';
- keyDisplayDiv.style.right = '10px';
- keyDisplayDiv.style.top = '';
- keyDisplayDiv.style.left = '';
- keyDisplayDiv.style.transform = '';
- break;
- case 'bottom-left':
- keyDisplayDiv.style.bottom = '10px';
- keyDisplayDiv.style.left = '10px';
- keyDisplayDiv.style.top = '';
- keyDisplayDiv.style.right = '';
- keyDisplayDiv.style.transform = '';
- break;
- case 'center':
- keyDisplayDiv.style.top = '50%';
- keyDisplayDiv.style.left = '50%';
- keyDisplayDiv.style.bottom = '';
- keyDisplayDiv.style.right = '';
- keyDisplayDiv.style.transform = 'translate(-50%, -50%)';
- break;
- case 'top-center':
- keyDisplayDiv.style.top = '10px';
- keyDisplayDiv.style.left = '50%';
- keyDisplayDiv.style.bottom = '';
- keyDisplayDiv.style.right = '';
- keyDisplayDiv.style.transform = 'translateX(-50%)';
- break;
- case 'bottom-center':
- keyDisplayDiv.style.bottom = '10px';
- keyDisplayDiv.style.left = '50%';
- keyDisplayDiv.style.top = '';
- keyDisplayDiv.style.right = '';
- keyDisplayDiv.style.transform = 'translateX(-50%)';
- break;
- }
- });
- closeGuiButton.addEventListener('click', () => {
- guiDiv.style.opacity = '0';
- setTimeout(() => guiDiv.style.display = 'none', 300);
- isGuiVisible = false;
- });
- function updateDisplay() {
- if (pressedKeys.size > 0) {
- keyDisplayDiv.innerText = Array.from(pressedKeys).join(' + ');
- } else if (!capsLockActive) {
- keyDisplayDiv.innerText = '';
- }
- }
- function displayCapsLock() {
- if (capsLockActive) {
- keyDisplayDiv.innerText = 'Caps Lock On';
- setTimeout(() => {
- keyDisplayDiv.innerText = '';
- updateDisplay();
- }, 1000);
- } else {
- updateDisplay();
- }
- }
- // Dragging functionality
- function makeDraggable(element) {
- let offsetX = 0, offsetY = 0, isDragging = false;
- element.addEventListener('mousedown', (e) => {
- offsetX = e.clientX - element.getBoundingClientRect().left;
- offsetY = e.clientY - element.getBoundingClientRect().top;
- isDragging = true;
- });
- document.addEventListener('mousemove', (e) => {
- if (isDragging) {
- element.style.left = `${e.clientX - offsetX}px`;
- element.style.top = `${e.clientY - offsetY}px`;
- element.style.right = '';
- element.style.bottom = '';
- element.style.transform = '';
- }
- });
- document.addEventListener('mouseup', () => {
- isDragging = false;
- });
- }
- makeDraggable(keyDisplayDiv); // Enable dragging for key display div
- makeDraggable(guiDiv); // Enable dragging for GUI div
- keyDisplayDiv.addEventListener('selectstart', (e) => {
- e.preventDefault(); // Prevent text selection
- });
- })();