Font Size Controller

Control the font size of any webpage with a slider.
Ask a question, post a review, or report the script.
Wrap lines
// ==UserScript==
// @name     Font Size Controller
// @description   Control the font size of any webpage with a slider.
// @version  1.1.3
// @namespace https://github.com/amazing-fish
// @grant    GM_setValue
// @grant    GM_getValue
// @license  MIT
// @include  *
// ==/UserScript==



window.addEventListener('load', function() {
  var isControllerEnabled = GM_getValue("isControllerEnabled", false);

  // Function to create a button
  function createButton(id, text, left, onclick, display = 'none') {
    var button = document.createElement('button');
    button.textContent = text;
    button.style = `position: fixed; top: 3px; background: rgba(0, 0, 0, 0.2); color: #fff; padding: 0px; font-size: 12px; left: ${left}px; z-index: 9999; display: ${display}; border: none`;
    button.id = id;
    button.onclick = onclick;
    return button;
  }

  // Create slider element
  var slider = document.createElement('input');
  slider.type = 'range';
  slider.min = '10';
  slider.max = '32';
  slider.value = GM_getValue("fontSize", '16');
  slider.id = 'fontSlider';
  slider.style = 'position: fixed; top: 0; left: 0; z-index: 9999; display: none';

  // Create font size display element
  var fontSizeDisplay = document.createElement('div');
  fontSizeDisplay.id = 'fontSizeDisplay';
  fontSizeDisplay.textContent = 'Font Size: ' + slider.value + 'px';
  fontSizeDisplay.style = 'position: fixed; top: 3px; left: 140px; z-index: 9999; font-size: 10px; display: none';

  // Append slider and display to body
  document.body.appendChild(slider);
  document.body.appendChild(fontSizeDisplay);

  // Function to update font sizes
  function updateFontSizes() {
    var all = document.getElementsByTagName("*");
    for (var i=0, max=all.length; i < max; i++) {
      // Exclude the control buttons
      if (!(all[i].id === 'fontSizeDisplay' || all[i].id === 'fontSlider' || all[i].id === 'enableButton' || all[i].id === 'disableButton' || all[i].id === 'expandButton' || all[i].id === 'hideButton')) {
        all[i].style.fontSize = slider.value + "px";
      }
    }
  }

  // Create tooltip element
  var tooltip = document.createElement('div');
  tooltip.id = 'sliderTooltip';
  tooltip.style = 'position: fixed; top: 25px; left: 0; z-index: 10000; background: rgba(0, 0, 0, 0.5); color: #fff; padding: 1px; font-size: 5px; display: none';
  document.body.appendChild(tooltip);

  // Event listener for slider
  slider.onmousemove = function(event) {
    fontSizeDisplay.textContent = 'Font Size: ' + this.value + 'px';
    tooltip.textContent = this.value;
    tooltip.style.left = event.pageX + 'px';
    tooltip.style.display = 'block';
    if (isControllerEnabled) {
      updateFontSizes();
      GM_setValue("fontSize", this.value);
    }
    tooltip.style.fontSize = '10px'

  }

  slider.onchange = function() {
    if (isControllerEnabled) {
      updateFontSizes();
      GM_setValue("fontSize", this.value);
    }
  }

  // Hide tooltip when mouse is not over the slider
  slider.onmouseout = function() {
    tooltip.style.display = 'none';
  }

  // Create buttons
  var expandButton = createButton('expandButton', '展开', 3, function() {
    ['fontSlider', 'fontSizeDisplay', 'hideButton'].forEach(function(id) {
      var element = document.getElementById(id);
      if(element) element.style.display = 'block';
    });

    if (isControllerEnabled) {
      document.getElementById('disableButton').style.display = 'block';
    } else {
      document.getElementById('enableButton').style.display = 'block';
    }

    this.style.display = 'none';
  }, 'block');

  var hideButton = createButton('hideButton', '收起', 250, function() {
    ['fontSlider', 'fontSizeDisplay', 'hideButton', 'disableButton', 'enableButton'].forEach(function(id) {
      var element = document.getElementById(id);
      if(element) element.style.display = 'none';
    });
    document.getElementById('expandButton').style.display = 'block';
  });

  var enableButton = createButton('enableButton', '开启', 220, function() {
    isControllerEnabled = true;
    GM_setValue("isControllerEnabled", isControllerEnabled);
    updateFontSizes();
    this.style.display = 'none';
    document.getElementById('disableButton').style.display = 'block';
  });

  var disableButton = createButton('disableButton', '关闭', 220, function() {
    isControllerEnabled = false;
    GM_setValue("isControllerEnabled", isControllerEnabled);
    this.style.display = 'none';
    document.getElementById('enableButton').style.display = 'block';
  });

  // Append buttons to body
  [expandButton, hideButton, enableButton, disableButton].forEach(function(button) {
    document.body.appendChild(button);
  });

  // Initial states
  if (isControllerEnabled) updateFontSizes();
});