☰

Scroll to Bottom, Stay Button, and Auto-Reload with Persistence and Icons for reddit-stream.com

Adds a floating button to scroll to the bottom, checkboxes to stay at the bottom, and to reload the page every 10, 15, 20, or 30 seconds on reddit-stream.com, with persistent settings and icons for clarity.

目前為 2024-11-10 提交的版本，檢視 最新版本。

// ==UserScript==
// @name         Scroll to Bottom, Stay Button, and Auto-Reload with Persistence and Icons for reddit-stream.com
// @namespace    https://github.com/Nick2bad4u/UserStyles
// @version      2.13
// @description  Adds a floating button to scroll to the bottom, checkboxes to stay at the bottom, and to reload the page every 10, 15, 20, or 30 seconds on reddit-stream.com, with persistent settings and icons for clarity.
// @author       Nick2bad4u
// @match        *://*.reddit-stream.com/*
// @connect      reddit-stream.com
// @grant        GM_xmlhttpRequest
// @license      Unlicense
// @resource     https://www.google.com/s2/favicons?sz=64&domain=reddit-stream.com
// @icon         https://www.google.com/s2/favicons?sz=64&domain=reddit-stream.com
// @icon64       https://www.google.com/s2/favicons?sz=64&domain=reddit-stream.com
// @tag          reddit
// ==/UserScript==

(function () {
  'use strict';

  console.log('Script initialized: Adding floating button, checkboxes, and persistence.');

  // Helper function for hover effect
  function handleHover(element) {
    element.addEventListener('mouseover', function () {
      element.style.opacity = '1';
    });
    element.addEventListener('mouseout', function () {
      element.style.opacity = '0.1';
    });
    console.log(`Hover effect applied to element: ${element}`);
  }

  // Function to save checkbox state
  function saveCheckboxState(key, value) {
    localStorage.setItem(key, value);
    console.log(`Saved checkbox state for ${key}: ${value}`);
  }

  // Function to load checkbox state
  function loadCheckboxState(key) {
    const state = localStorage.getItem(key) === 'true';
    console.log(`Loaded checkbox state for ${key}: ${state}`);
    return state;
  }

  // Styling for the checkboxes with hover title support for icons
  function styleCheckboxWrapper(wrapper, iconText, checkboxId, titleText) {
    wrapper.style.display = 'flex';
    wrapper.style.flexDirection = 'column';
    wrapper.style.alignItems = 'center';
    wrapper.style.position = 'fixed';
    wrapper.style.bottom = '20px';
    wrapper.style.zIndex = '1000';
    wrapper.style.cursor = 'pointer';
    wrapper.style.opacity = '0.1';
    wrapper.style.transition = 'opacity 0.3s';

    const label = document.createElement('label');
    label.htmlFor = checkboxId;
    label.style.cursor = 'pointer';

    const icon = document.createElement('div');
    icon.innerHTML = iconText;
    icon.style.fontSize = '12px';
    icon.style.color = 'orange';
    icon.style.marginTop = '5px';
    icon.title = titleText;

    label.appendChild(icon);
    wrapper.appendChild(label);
    handleHover(wrapper);

    console.log(`Checkbox wrapper styled with icon: ${iconText} and title: ${titleText}`);
  }

  // Scroll-to-bottom button
  const button = document.createElement('button');
  button.innerHTML = '⬇️';
  button.style.position = 'fixed';
  button.style.bottom = '20px';
  button.style.right = '20px'; // Changed from left to right
  button.style.zIndex = '1000';
  button.style.padding = '10px';
  button.style.borderRadius = '50%';
  button.style.border = 'none';
  button.style.backgroundColor = 'black';
  button.style.color = 'blue';
  button.style.fontSize = '20px';
  button.style.cursor = 'pointer';
  button.style.opacity = '0.5';
  button.style.transition = 'opacity 0.3s';
  button.title = 'Click to scroll to the bottom';
  handleHover(button);

  button.addEventListener('click', function () {
    globalThis.scrollTo({
      top: document.body.scrollHeight,
      behavior: 'smooth',
    });
    console.log('Scroll-to-bottom button clicked, scrolling to the bottom.');
  });

  // Stay-at-bottom checkbox with icon
  const stayAtBottomWrapper = document.createElement('div');
  stayAtBottomWrapper.style.right = '60px'; // Changed from left to right
  const stayAtBottomCheckboxId = 'stayAtBottomCheckbox';
  styleCheckboxWrapper(
    stayAtBottomWrapper,
    '🔽',
    stayAtBottomCheckboxId,
    'Check to stay at the bottom'
  );

  const stayAtBottomCheckbox = document.createElement('input');
  stayAtBottomCheckbox.type = 'checkbox';
  stayAtBottomCheckbox.id = stayAtBottomCheckboxId;
  stayAtBottomCheckbox.checked = loadCheckboxState('stayAtBottom');
  stayAtBottomCheckbox.title = 'Check to stay at the bottom';
  stayAtBottomWrapper.insertBefore(stayAtBottomCheckbox, stayAtBottomWrapper.firstChild);

  stayAtBottomCheckbox.addEventListener('change', function () {
    saveCheckboxState('stayAtBottom', stayAtBottomCheckbox.checked);
  });

  let scrollTimeout;
  const debounce = (fn, delay) => {
    return function () {
      clearTimeout(scrollTimeout);
      scrollTimeout = setTimeout(fn, delay);
    };
  };

  const keepAtBottom = debounce(function () {
    if (stayAtBottomCheckbox.checked) {
      globalThis.scrollTo({
        top: document.body.scrollHeight,
        behavior: 'smooth',
      });
      console.log('Auto-scrolling to the bottom (Stay at Bottom active).');
    } else {
      console.log('Auto-scrolling stopped (Stay at Bottom inactive).');
    }
  }, 200);

  const observer = new MutationObserver(keepAtBottom);
  observer.observe(document.body, {
    childList: true,
    subtree: true,
  });
  console.log('MutationObserver started for staying at the bottom.');

  // Auto-reload every 10 seconds checkbox with icon
  const autoReload10Wrapper = document.createElement('div');
  autoReload10Wrapper.style.right = '100px'; // Changed from left to right
  const autoReload10CheckboxId = 'autoReload10Checkbox';
  styleCheckboxWrapper(
    autoReload10Wrapper,
    '10s',
    autoReload10CheckboxId,
    'Check to reload every 10 seconds'
  );

  const autoReload10Checkbox = document.createElement('input');
  autoReload10Checkbox.type = 'checkbox';
  autoReload10Checkbox.id = autoReload10CheckboxId;
  autoReload10Checkbox.checked = loadCheckboxState('autoReload10');
  autoReload10Checkbox.title = 'Check to reload every 10 seconds';
  autoReload10Wrapper.insertBefore(autoReload10Checkbox, autoReload10Wrapper.firstChild);

  let reloadInterval10;

  function startAutoReload10() {
    reloadInterval10 = setInterval(() => {
      globalThis.location.reload();
      console.log('Page reloading every 10 seconds.');
    }, 10000);
  }

  if (autoReload10Checkbox.checked) startAutoReload10();

  autoReload10Checkbox.addEventListener('change', function () {
    saveCheckboxState('autoReload10', autoReload10Checkbox.checked);
    if (autoReload10Checkbox.checked) {
      startAutoReload10();
    } else {
      clearInterval(reloadInterval10);
      console.log('Stopped reloading every 10 seconds.');
    }
  });

  // Auto-reload every 15 seconds checkbox with icon
  const autoReload15Wrapper = document.createElement('div');
  autoReload15Wrapper.style.right = '140px'; // Changed from left to right
  const autoReload15CheckboxId = 'autoReload15Checkbox';
  styleCheckboxWrapper(
    autoReload15Wrapper,
    '15s',
    autoReload15CheckboxId,
    'Check to reload every 15 seconds'
  );

  const autoReload15Checkbox = document.createElement('input');
  autoReload15Checkbox.type = 'checkbox';
  autoReload15Checkbox.id = autoReload15CheckboxId;
  autoReload15Checkbox.checked = loadCheckboxState('autoReload15');
  autoReload15Checkbox.title = 'Check to reload every 15 seconds';
  autoReload15Wrapper.insertBefore(autoReload15Checkbox, autoReload15Wrapper.firstChild);

  let reloadInterval15;

  function startAutoReload15() {
    reloadInterval15 = setInterval(() => {
      globalThis.location.reload();
      console.log('Page reloading every 15 seconds.');
    }, 15000);
  }

  if (autoReload15Checkbox.checked) startAutoReload15();

  autoReload15Checkbox.addEventListener('change', function () {
    saveCheckboxState('autoReload15', autoReload15Checkbox.checked);
    if (autoReload15Checkbox.checked) {
      startAutoReload15();
    } else {
      clearInterval(reloadInterval15);
      console.log('Stopped reloading every 15 seconds.');
    }
  });

  // Auto-reload every 20 seconds checkbox with icon
  const autoReload20Wrapper = document.createElement('div');
  autoReload20Wrapper.style.right = '180px'; // Changed from left to right
  const autoReload20CheckboxId = 'autoReload20Checkbox';
  styleCheckboxWrapper(
    autoReload20Wrapper,
    '20s',
    autoReload20CheckboxId,
    'Check to reload every 20 seconds'
  );

  const autoReload20Checkbox = document.createElement('input');
  autoReload20Checkbox.type = 'checkbox';
  autoReload20Checkbox.id = autoReload20CheckboxId;
  autoReload20Checkbox.checked = loadCheckboxState('autoReload20');
  autoReload20Checkbox.title = 'Check to reload every 20 seconds';
  autoReload20Wrapper.insertBefore(autoReload20Checkbox, autoReload20Wrapper.firstChild);

  let reloadInterval20;

  function startAutoReload20() {
    reloadInterval20 = setInterval(() => {
      globalThis.location.reload();
      console.log('Page reloading every 20 seconds.');
    }, 20000);
  }

  if (autoReload20Checkbox.checked) startAutoReload20();

  autoReload20Checkbox.addEventListener('change', function () {
    saveCheckboxState('autoReload20', autoReload20Checkbox.checked);
    if (autoReload20Checkbox.checked) {
      startAutoReload20();
    } else {
      clearInterval(reloadInterval20);
      console.log('Stopped reloading every 20 seconds.');
    }
  });

  // Auto-reload every 30 seconds checkbox with icon
  const autoReload30Wrapper = document.createElement('div');
  autoReload30Wrapper.style.right = '220px'; // Changed from left to right
  const autoReload30CheckboxId = 'autoReload30Checkbox';
  styleCheckboxWrapper(
    autoReload30Wrapper,
    '30s',
    autoReload30CheckboxId,
    'Check to reload every 30 seconds'
  );

  const autoReload30Checkbox = document.createElement('input');
  autoReload30Checkbox.type = 'checkbox';
  autoReload30Checkbox.id = autoReload30CheckboxId;
  autoReload30Checkbox.checked = loadCheckboxState('autoReload30');
  autoReload30Checkbox.title = 'Check to reload every 30 seconds';
  autoReload30Wrapper.insertBefore(autoReload30Checkbox, autoReload30Wrapper.firstChild);

  let reloadInterval30;

  function startAutoReload30() {
    reloadInterval30 = setInterval(() => {
      globalThis.location.reload();
      console.log('Page reloading every 30 seconds.');
    }, 30000);
  }

  if (autoReload30Checkbox.checked) startAutoReload30();

  autoReload30Checkbox.addEventListener('change', function () {
    saveCheckboxState('autoReload30', autoReload30Checkbox.checked);
    if (autoReload30Checkbox.checked) {
      startAutoReload30();
    } else {
      clearInterval(reloadInterval30);
      console.log('Stopped reloading every 30 seconds.');
    }
  });

  // Append elements to the page
  document.body.appendChild(button);
  document.body.appendChild(stayAtBottomWrapper);
  document.body.appendChild(autoReload10Wrapper);
  document.body.appendChild(autoReload15Wrapper);
  document.body.appendChild(autoReload20Wrapper);
  document.body.appendChild(autoReload30Wrapper);
  console.log('All elements appended with styling and icons.');
})();

QingJ © 2025

镜像随时可能失效，请加Q群300939539或关注我们的公众号极客氢云获取最新地址