☰

Universal Zoom Control

Add zoom in/out buttons to every website

  1. // ==UserScript==
  2. // @name         Universal Zoom Control
  3. // @namespace    http://tampermonkey.net/
  4. // @version      1.1
  5. // @description  Add zoom in/out buttons to every website
  6. // @author       You
  7. // @match        *://*/*
  8. // @grant        none
  9. // @run-at       document-start
  10. // ==/UserScript==
  11.  
  12. (function() {
  13.     'use strict';
  14.     
  15.     let currentZoom = 1.0;
  16.     let zoomContainer = null;
  17.     let isHidden = false;
  18.     let transparency = 0.9; // Default transparency (0.1 = very transparent, 1.0 = opaque)
  19.     
  20.     // Create zoom controls
  21.     function createZoomControls() {
  22.         // Create container
  23.         zoomContainer = document.createElement('div');
  24.         zoomContainer.id = 'zoom-controls';
  25.         updateContainerStyle();
  26.         
  27.         // Create zoom out button
  28.         const zoomOutBtn = document.createElement('button');
  29.         zoomOutBtn.innerHTML = '−';
  30.         zoomOutBtn.title = 'Zoom Out (Ctrl + -)';
  31.         zoomOutBtn.style.cssText = `
  32.             background: #4CAF50;
  33.             color: white;
  34.             border: none;
  35.             width: 32px;
  36.             height: 32px;
  37.             border-radius: 6px;
  38.             cursor: pointer;
  39.             font-size: 18px;
  40.             font-weight: bold;
  41.             margin-right: 4px;
  42.             transition: background 0.2s;
  43.         `;
  44.         zoomOutBtn.onmouseover = () => zoomOutBtn.style.background = '#45a049';
  45.         zoomOutBtn.onmouseout = () => zoomOutBtn.style.background = '#4CAF50';
  46.         zoomOutBtn.onclick = () => zoomOut();
  47.         
  48.         // Create zoom level display
  49.         const zoomLevel = document.createElement('span');
  50.         zoomLevel.id = 'zoom-level';
  51.         zoomLevel.style.cssText = `
  52.             color: white;
  53.             font-size: 12px;
  54.             font-weight: bold;
  55.             margin: 0 8px;
  56.             min-width: 35px;
  57.             text-align: center;
  58.             display: inline-block;
  59.         `;
  60.         zoomLevel.textContent = '100%';
  61.         
  62.         // Create zoom in button
  63.         const zoomInBtn = document.createElement('button');
  64.         zoomInBtn.innerHTML = '+';
  65.         zoomInBtn.title = 'Zoom In (Ctrl + +)';
  66.         zoomInBtn.style.cssText = `
  67.             background: #2196F3;
  68.             color: white;
  69.             border: none;
  70.             width: 32px;
  71.             height: 32px;
  72.             border-radius: 6px;
  73.             cursor: pointer;
  74.             font-size: 18px;
  75.             font-weight: bold;
  76.             margin-left: 4px;
  77.             transition: background 0.2s;
  78.         `;
  79.         zoomInBtn.onmouseover = () => zoomInBtn.style.background = '#1976D2';
  80.         zoomInBtn.onmouseout = () => zoomInBtn.style.background = '#2196F3';
  81.         zoomInBtn.onclick = () => zoomIn();
  82.         
  83.         // Create transparency slider
  84.         const transparencyContainer = document.createElement('div');
  85.         transparencyContainer.style.cssText = `
  86.             margin-top: 8px;
  87.             padding-top: 8px;
  88.             border-top: 1px solid rgba(255, 255, 255, 0.2);
  89.             display: flex;
  90.             align-items: center;
  91.             gap: 6px;
  92.         `;
  93.         
  94.         const transparencyLabel = document.createElement('span');
  95.         transparencyLabel.textContent = '👁';
  96.         transparencyLabel.style.cssText = `
  97.             color: white;
  98.             font-size: 12px;
  99.         `;
  100.         
  101.         const transparencySlider = document.createElement('input');
  102.         transparencySlider.type = 'range';
  103.         transparencySlider.min = '0.3';
  104.         transparencySlider.max = '1.0';
  105.         transparencySlider.step = '0.1';
  106.         transparencySlider.value = transparency;
  107.         transparencySlider.style.cssText = `
  108.             width: 60px;
  109.             height: 4px;
  110.             background: rgba(255, 255, 255, 0.3);
  111.             outline: none;
  112.             border-radius: 2px;
  113.         `;
  114.         transparencySlider.oninput = (e) => {
  115.             transparency = parseFloat(e.target.value);
  116.             updateContainerStyle();
  117.             saveSettings();
  118.         };
  119.         
  120.         transparencyContainer.appendChild(transparencyLabel);
  121.         transparencyContainer.appendChild(transparencySlider);
  122.         
  123.         // Create hide/show toggle button
  124.         const toggleBtn = document.createElement('button');
  125.         toggleBtn.innerHTML = '👁';
  126.         toggleBtn.title = 'Hide/Show Controls (Alt + H)';
  127.         toggleBtn.style.cssText = `
  128.             background: #9C27B0;
  129.             color: white;
  130.             border: none;
  131.             width: 32px;
  132.             height: 32px;
  133.             border-radius: 6px;
  134.             cursor: pointer;
  135.             font-size: 12px;
  136.             margin-left: 8px;
  137.             transition: background 0.2s;
  138.         `;
  139.         toggleBtn.onmouseover = () => toggleBtn.style.background = '#7B1FA2';
  140.         toggleBtn.onmouseout = () => toggleBtn.style.background = '#9C27B0';
  141.         toggleBtn.onclick = () => toggleVisibility();
  142.         
  143.         // Create reset button
  144.         const resetBtn = document.createElement('button');
  145.         resetBtn.innerHTML = '⌂';
  146.         resetBtn.title = 'Reset Zoom (Ctrl + 0)';
  147.         resetBtn.style.cssText = `
  148.             background: #FF9800;
  149.             color: white;
  150.             border: none;
  151.             width: 32px;
  152.             height: 32px;
  153.             border-radius: 6px;
  154.             cursor: pointer;
  155.             font-size: 14px;
  156.             margin-left: 8px;
  157.             transition: background 0.2s;
  158.         `;
  159.         resetBtn.onmouseover = () => resetBtn.style.background = '#F57C00';
  160.         resetBtn.onmouseout = () => resetBtn.style.background = '#FF9800';
  161.         resetBtn.onclick = () => resetZoom();
  162.         
  163.         // Create main controls container
  164.         const mainControls = document.createElement('div');
  165.         mainControls.id = 'main-controls';
  166.         mainControls.style.cssText = `
  167.             display: flex;
  168.             align-items: center;
  169.         `;
  170.         
  171.         // Assemble main controls
  172.         mainControls.appendChild(zoomOutBtn);
  173.         mainControls.appendChild(zoomLevel);
  174.         mainControls.appendChild(zoomInBtn);
  175.         mainControls.appendChild(resetBtn);
  176.         mainControls.appendChild(toggleBtn);
  177.         
  178.         // Assemble all controls
  179.         zoomContainer.appendChild(mainControls);
  180.         zoomContainer.appendChild(transparencyContainer);
  181.         
  182.         // Add to page
  183.         document.body.appendChild(zoomContainer);
  184.         
  185.         // Load saved settings
  186.         loadSettings();
  187.         
  188.         // Make draggable
  189.         makeDraggable(zoomContainer);
  190.     }
  191.     
  192.     // Update container transparency and style
  193.     function updateContainerStyle() {
  194.         if (!zoomContainer) return;
  195.         
  196.         const bgAlpha = transparency * 0.8; // Background is slightly more transparent
  197.         zoomContainer.style.cssText = `
  198.             position: fixed;
  199.             top: 20px;
  200.             right: 20px;
  201.             z-index: 999999;
  202.             background: rgba(0, 0, 0, ${bgAlpha});
  203.             border-radius: 8px;
  204.             padding: 8px;
  205.             box-shadow: 0 4px 12px rgba(0, 0, 0, ${transparency * 0.3});
  206.             font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  207.             user-select: none;
  208.             backdrop-filter: blur(10px);
  209.             opacity: ${transparency};
  210.             transition: opacity 0.3s ease, transform 0.3s ease;
  211.             cursor: grab;
  212.         `;
  213.         
  214.         // Apply hidden state if needed
  215.         if (isHidden) {
  216.             zoomContainer.style.transform = 'translateX(calc(100% - 40px))';
  217.             zoomContainer.style.opacity = '0.3';
  218.         } else {
  219.             zoomContainer.style.transform = 'translateX(0)';
  220.         }
  221.     }
  222.     
  223.     // Toggle visibility
  224.     function toggleVisibility() {
  225.         isHidden = !isHidden;
  226.         updateContainerStyle();
  227.         saveSettings();
  228.         
  229.         // Change toggle button appearance
  230.         const toggleBtn = zoomContainer.querySelector('button[title*="Hide/Show"]');
  231.         if (toggleBtn) {
  232.             toggleBtn.innerHTML = isHidden ? '👀' : '👁';
  233.             toggleBtn.title = isHidden ? 'Show Controls (Alt + H)' : 'Hide/Show Controls (Alt + H)';
  234.         }
  235.     }
  236.     
  237.     // Zoom functions
  238.     function zoomIn() {
  239.         currentZoom = Math.min(currentZoom + 0.1, 3.0);
  240.         applyZoom();
  241.     }
  242.     
  243.     function zoomOut() {
  244.         currentZoom = Math.max(currentZoom - 0.1, 0.5);
  245.         applyZoom();
  246.     }
  247.     
  248.     function resetZoom() {
  249.         currentZoom = 1.0;
  250.         applyZoom();
  251.     }
  252.     
  253.     function applyZoom() {
  254.         document.body.style.zoom = currentZoom;
  255.         document.body.style.transform = `scale(${currentZoom})`;
  256.         document.body.style.transformOrigin = 'top left';
  257.         
  258.         // Update zoom level display
  259.         const zoomLevelElement = document.getElementById('zoom-level');
  260.         if (zoomLevelElement) {
  261.             zoomLevelElement.textContent = Math.round(currentZoom * 100) + '%';
  262.         }
  263.         
  264.         // Save zoom level and settings to localStorage
  265.         saveSettings();
  266.     }
  267.     
  268.     // Save settings to localStorage
  269.     function saveSettings() {
  270.         try {
  271.             const settings = {
  272.                 zoom: currentZoom,
  273.                 transparency: transparency,
  274.                 hidden: isHidden,
  275.                 position: {
  276.                     left: zoomContainer ? zoomContainer.style.left : '',
  277.                     top: zoomContainer ? zoomContainer.style.top : '',
  278.                     right: zoomContainer ? zoomContainer.style.right : ''
  279.                 }
  280.             };
  281.             localStorage.setItem('userscript-zoom-settings', JSON.stringify(settings));
  282.         } catch (e) {
  283.             // Ignore localStorage errors
  284.         }
  285.     }
  286.     
  287.     // Load saved settings
  288.     function loadSettings() {
  289.         try {
  290.             const savedSettings = localStorage.getItem('userscript-zoom-settings');
  291.             if (savedSettings) {
  292.                 const settings = JSON.parse(savedSettings);
  293.                 currentZoom = settings.zoom || 1.0;
  294.                 transparency = settings.transparency || 0.9;
  295.                 isHidden = settings.hidden || false;
  296.                 
  297.                 // Apply zoom
  298.                 applyZoom();
  299.                 
  300.                 // Update transparency slider
  301.                 const slider = zoomContainer.querySelector('input[type="range"]');
  302.                 if (slider) slider.value = transparency;
  303.                 
  304.                 // Apply position
  305.                 if (settings.position && settings.position.left) {
  306.                     zoomContainer.style.left = settings.position.left;
  307.                     zoomContainer.style.top = settings.position.top;
  308.                     zoomContainer.style.right = 'auto';
  309.                 }
  310.                 
  311.                 // Update container style with saved settings
  312.                 updateContainerStyle();
  313.                 
  314.                 // Update toggle button if hidden
  315.                 if (isHidden) {
  316.                     const toggleBtn = zoomContainer.querySelector('button[title*="Hide/Show"]');
  317.                     if (toggleBtn) {
  318.                         toggleBtn.innerHTML = '👀';
  319.                         toggleBtn.title = 'Show Controls (Alt + H)';
  320.                     }
  321.                 }
  322.             }
  323.         } catch (e) {
  324.             // Ignore localStorage errors
  325.         }
  326.     }
  327.     
  328.     // Make element draggable
  329.     function makeDraggable(element) {
  330.         let isDragging = false;
  331.         let dragOffset = { x: 0, y: 0 };
  332.         
  333.         element.onmousedown = function(e) {
  334.             // Don't drag if clicking on interactive elements
  335.             if (e.target.tagName === 'INPUT' || e.target.tagName === 'BUTTON') {
  336.                 return;
  337.             }
  338.             
  339.             isDragging = true;
  340.             dragOffset.x = e.clientX - element.offsetLeft;
  341.             dragOffset.y = e.clientY - element.offsetTop;
  342.             element.style.cursor = 'grabbing';
  343.             e.preventDefault();
  344.         };
  345.         
  346.         document.onmousemove = function(e) {
  347.             if (!isDragging) return;
  348.             
  349.             const newX = e.clientX - dragOffset.x;
  350.             const newY = e.clientY - dragOffset.y;
  351.             
  352.             // Keep within viewport bounds
  353.             const maxX = window.innerWidth - element.offsetWidth;
  354.             const maxY = window.innerHeight - element.offsetHeight;
  355.             
  356.             element.style.left = Math.max(0, Math.min(newX, maxX)) + 'px';
  357.             element.style.top = Math.max(0, Math.min(newY, maxY)) + 'px';
  358.             element.style.right = 'auto';
  359.             
  360.             // Save position
  361.             saveSettings();
  362.         };
  363.         
  364.         document.onmouseup = function() {
  365.             isDragging = false;
  366.             element.style.cursor = 'grab';
  367.         };
  368.         
  369.         element.style.cursor = 'grab';
  370.     }
  371.     
  372.     // Keyboard shortcuts
  373.     function setupKeyboardShortcuts() {
  374.         document.addEventListener('keydown', function(e) {
  375.             if (e.ctrlKey || e.metaKey) {
  376.                 switch(e.key) {
  377.                     case '+':
  378.                     case '=':
  379.                         e.preventDefault();
  380.                         zoomIn();
  381.                         break;
  382.                     case '-':
  383.                         e.preventDefault();
  384.                         zoomOut();
  385.                         break;
  386.                     case '0':
  387.                         e.preventDefault();
  388.                         resetZoom();
  389.                         break;
  390.                 }
  391.             }
  392.             
  393.             // Alt + H for hide/show toggle
  394.             if (e.altKey && e.key.toLowerCase() === 'h') {
  395.                 e.preventDefault();
  396.                 toggleVisibility();
  397.             }
  398.         });
  399.     }
  400.     
  401.     // Initialize when DOM is ready
  402.     function init() {
  403.         if (document.body) {
  404.             createZoomControls();
  405.             setupKeyboardShortcuts();
  406.         } else {
  407.             // Wait for body to be available
  408.             const observer = new MutationObserver(function(mutations) {
  409.                 if (document.body) {
  410.                     observer.disconnect();
  411.                     createZoomControls();
  412.                     setupKeyboardShortcuts();
  413.                 }
  414.             });
  415.             observer.observe(document.documentElement, { childList: true, subtree: true });
  416.         }
  417.     }
  418.     
  419.     // Start initialization
  420.     if (document.readyState === 'loading') {
  421.         document.addEventListener('DOMContentLoaded', init);
  422.     } else {
  423.         init();
  424.     }
  425.     
  426. })();