Font Size Controller

Greasy Fork is available in English.
Font Size Controller

Control the font size of any webpage with a slider.
当前为 2023-11-06 提交的版本，查看最新版本。
换行
// ==UserScript==
// @name     Font Size Controller
// @description   Control the font size of any webpage with a slider.
// @version  1.0.2
// @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);  // Get the stored state of the controller, if any

  // Create enable button
  var enableButton = document.createElement('button');
  enableButton.textContent = '开启';
  enableButton.style = 'position: fixed; top: 0; left: 0; z-index: 9999';
  enableButton.id = 'enableButton'; // Add an ID to the button
  document.body.appendChild(enableButton);

  // Create disable button
  var disableButton = document.createElement('button');
  disableButton.textContent = '关闭';
  disableButton.style = 'position: fixed; top: 0; left: 220px; z-index: 9999;'; // Adjust the width and height
  disableButton.id = 'disableButton'; // Add an ID to the button
  document.body.appendChild(disableButton);

  // Initially hide the disable button
  disableButton.style.display = 'none';

  if (isControllerEnabled) {
    enableController();
  }

  enableButton.onclick = enableController;

  disableButton.onclick = function() {
    // Remove slider and display
    var slider = document.getElementById('fontSlider');
    var fontSizeDisplay = document.getElementById('fontSizeDisplay');
    document.body.removeChild(slider);
    document.body.removeChild(fontSizeDisplay);

    // Show the enable button
    enableButton.style.display = 'block';

    // Hide the disable button
    disableButton.style.display = 'none';

    // Store the state of the controller
    GM_setValue("isControllerEnabled", false);
  }

  function enableController() {
    // Create slider element
    var slider = document.createElement('input');
    slider.type = 'range';
    slider.min = '10';
    slider.max = '32';
    slider.value = GM_getValue("fontSize", '16');  // Get the stored font size, if any
    slider.id = 'fontSlider';
    slider.style = 'position: fixed; top: 0; left: 0; z-index: 9999';  // Position the slider at top left

    // 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';  // Position the display next to the slider

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

    // Show the disable button
    disableButton.style.display = 'block';

    // Function to update font sizes
    function updateFontSizes(size) {
      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].style.fontSize = size + "px";
        }
      }
    }

    // Update the font sizes immediately upon loading the page
    updateFontSizes(slider.value);

    // Event listener for slider
    slider.oninput = function() {
      fontSizeDisplay.textContent = 'Font Size: ' + this.value + 'px';  // Update the display
      updateFontSizes(this.value);  // Update the font sizes
      GM_setValue("fontSize", this.value);  // Store the font size
    }

    // Hide the enable button
    enableButton.style.display = 'none';

    // Store the state of the controller
    GM_setValue("isControllerEnabled", true);
  }
});