☰

FPS counter

Toggleable FPS counter using Ctrl+Alt+F, to move the counter hover over it and drag using Ctrl+Middle-click

  1. // ==UserScript==
  2. // @name         FPS counter
  3. // @namespace    https://fps-bookmarkletuserscript.gabrielzv1233.repl.co
  4. // @version      1.0
  5. // @description  Toggleable FPS counter using Ctrl+Alt+F, to move the counter hover over it and drag using Ctrl+Middle-click
  6. // @match        *://*/*
  7. // @grant        none
  8. // @license      gpl-3.0
  9. // @language     en-US
  10. // ==/UserScript==
  11.  
  12. (function() {
  13.     let fpsElement = document.createElement('div');
  14.     fpsElement.style.position = 'fixed';
  15.     fpsElement.style.top = '0';
  16.     fpsElement.style.padding = '4px';
  17.     fpsElement.style.backgroundColor = 'rgba(0, 0, 0, 0.7)';
  18.     fpsElement.style.color = '#fff';
  19.     fpsElement.style.fontFamily = 'Arial, sans-serif';
  20.     fpsElement.style.fontSize = '12px';
  21.     fpsElement.style.zIndex = '9999';
  22.  
  23.     let isShowingFPS = false;
  24.     let frameCount = 0;
  25.     let lastTime = performance.now();
  26.     let isDraggingFPS = false;
  27.     let offsetX = 0;
  28.     let offsetY = 0;
  29.     let previousCursorStyle = '';
  30.  
  31.     document.addEventListener('keydown', function(event) {
  32.         if (event.ctrlKey && event.altKey && event.key === 'f' && !isDraggingFPS) {
  33.             toggleFPS();
  34.         }
  35.     });
  36.  
  37.     fpsElement.addEventListener('mousedown', function(event) {
  38.         if (event.ctrlKey && event.button === 1) {
  39.             startDragFPS(event);
  40.         }
  41.     });
  42.  
  43.     document.addEventListener('mouseup', function(event) {
  44.         if (event.button === 1) {
  45.             stopDragFPS();
  46.         }
  47.     });
  48.  
  49.     function toggleFPS() {
  50.         if (isShowingFPS) {
  51.             document.body.removeChild(fpsElement);
  52.             isShowingFPS = false;
  53.         } else {
  54.             document.body.appendChild(fpsElement);
  55.             isShowingFPS = true;
  56.             requestAnimationFrame(updateFPS);
  57.         }
  58.     }
  59.  
  60.     function startDragFPS(event) {
  61.         isDraggingFPS = true;
  62.         offsetX = event.clientX - fpsElement.getBoundingClientRect().left;
  63.         offsetY = event.clientY - fpsElement.getBoundingClientRect().top;
  64.         fpsElement.style.pointerEvents = 'none';
  65.         previousCursorStyle = document.body.style.cursor;
  66.         document.body.style.cursor = 'move';
  67.         document.addEventListener('mousemove', dragFPS);
  68.     }
  69.  
  70.     function stopDragFPS() {
  71.         isDraggingFPS = false;
  72.         fpsElement.style.pointerEvents = 'auto';
  73.         document.body.style.cursor = previousCursorStyle;
  74.         document.removeEventListener('mousemove', dragFPS);
  75.     }
  76.  
  77.     function dragFPS(event) {
  78.         let left = event.clientX - offsetX;
  79.         let maxLeft = window.innerWidth - fpsElement.offsetWidth;
  80.         fpsElement.style.left = Math.max(0, Math.min(left, maxLeft)) + 'px';
  81.  
  82.         let top = event.clientY - offsetY;
  83.         let maxTop = window.innerHeight - fpsElement.offsetHeight;
  84.         fpsElement.style.top = Math.max(0, Math.min(top, maxTop)) + 'px';
  85.     }
  86.  
  87.     function updateFPS() {
  88.         frameCount++;
  89.         let currentTime = performance.now();
  90.         let deltaTime = currentTime - lastTime;
  91.  
  92.         if (deltaTime >= 1000) {
  93.             let fps = Math.round((frameCount * 1000) / deltaTime);
  94.             fpsElement.textContent = 'FPS: ' + fps;
  95.  
  96.             frameCount = 0;
  97.             lastTime = currentTime;
  98.         }
  99.  
  100.         if (isShowingFPS) {
  101.             requestAnimationFrame(updateFPS);
  102.         }
  103.     }
  104. })();