☰

Brightness Slider (AI)

Adds a small on-screen slider to adjust page brightness, Made by AI and works for mobile and desktop.

当前为 2025-07-03 提交的版本，查看 最新版本。

// ==UserScript==
// @name        Brightness Slider (AI)
// @version     1.0
// @description Adds a small on-screen slider to adjust page brightness, Made by AI and works for mobile and desktop.
// @license     CC0-1.0
// @match       *://*/*
// @grant       GM.getValue
// @grant       GM.setValue
// @namespace https://greasyfork.org/users/1491313
// ==/UserScript==

;(async function() {
  const STORAGE_KEY = 'brightness-value'
  const MIN   = 0.5
  const MAX   = 1.5
  const STEP  = 0.01
  const WIDTH = '120px'

  // Create slider
  const slider = document.createElement('input')
  slider.id    = 'brightness-slider'
  slider.type  = 'range'
  slider.min   = MIN
  slider.max   = MAX
  slider.step  = STEP
  slider.style.cssText = `
    position: fixed;
    bottom: 10px;
    right: 10px;
    width: ${WIDTH};
    z-index: 9999;
    opacity: 0.6;
    transition: opacity .3s;
  `
  slider.addEventListener('mouseover', () => slider.style.opacity = 1)
  slider.addEventListener('mouseout',  () => slider.style.opacity = 0.6)

  
  const style = document.createElement('style')
  style.textContent = `
    #brightness-slider {
      height: 8px;
      cursor: pointer;
    }
    #brightness-slider::-webkit-slider-thumb {
      -webkit-appearance: none;
      width: 16px;
      height: 16px;
      background: #888;
      border-radius: 50%;
      margin-top: -4px;
    }
    #brightness-slider::-moz-range-thumb {
      width: 16px;
      height: 16px;
      background: #888;
      border-radius: 50%;
      border: none;
    }
  `
  document.head.appendChild(style)

  // Load saved brightness (default = 1)
  const saved = await GM.getValue(STORAGE_KEY, 1)
  slider.value = saved

  // Apply brightness filter
  function applyBrightness(v) {
    document.documentElement.style.filter = `brightness(${v})`
  }
  applyBrightness(slider.value)

  // On change: update filter and cache
  slider.addEventListener('input', async e => {
    const v = e.target.value
    applyBrightness(v)
    await GM.setValue(STORAGE_KEY, v)
  })

  document.body.appendChild(slider)
})()