Greasy Fork is available in English.
点击屏幕左侧按钮中部按钮，可展开灰度调节面板
// ==UserScript==
// @name 页面灰度调节器
// @name:zh-CN 页面灰度调节器
// @namespace http://tampermonkey.net/
// @version 1.1
// @description 点击屏幕左侧按钮中部按钮，可展开灰度调节面板
// @description:zh-CN 点击屏幕左侧按钮中部按钮，可展开灰度调节面板
// @author yonlin zhu
// @match *://*/*
// @license MIT
// @run-at document-end
// @grant none
// ==/UserScript==
(function () {
const KEY_PREFIX = '__tm_grayscale_level__:';
const CONTROL_ID = 'tm-gray-control';
if (document.getElementById(CONTROL_ID)) return;
const host = location.hostname;
const baseDomain = getBaseDomain(host);
const STORAGE_KEY = KEY_PREFIX + baseDomain;
const stored = localStorage.getItem(STORAGE_KEY);
let grayLevel = stored !== null ? clamp(parseInt(stored, 10), 0, 100) : 0;
applyGrayscale(grayLevel);
const root = document.createElement('div');
root.id = CONTROL_ID;
root.innerHTML = `
<div class="tg-panel">
<div class="tg-btn" title="点击调节灰度">
<span class="tg-btn-text">灰</span>
</div>
<div class="tg-slider-wrap" style="display:none;">
<div class="tg-row">
<input type="range" min="0" max="100" value="${grayLevel}" class="tg-range"/>
<span class="tg-val">${grayLevel}%</span>
</div>
<div class="tg-tip">主域: ${baseDomain}<br/>离开 1 秒收起</div>
</div>
</div>
`;
document.documentElement.appendChild(root);
const style = document.createElement('style');
style.textContent = `
#${CONTROL_ID} {
position: fixed;
top: 40%;
left: 0;
z-index: 2147483647;
font-family: system-ui, sans-serif;
pointer-events: none;
}
#${CONTROL_ID} * { box-sizing: border-box; }
#${CONTROL_ID} .tg-panel {
position: relative;
width: 280px;
height: 78px;
pointer-events: auto;
}
#${CONTROL_ID} .tg-panel:not(.expanded) {
width: 56px;
height: 56px;
transform: translateX(-28px);
transition: transform .25s ease;
}
#${CONTROL_ID} .tg-panel.peek:not(.expanded) {
transform: translateX(0);
}
#${CONTROL_ID} .tg-panel.expanded {
transform: translateX(8px);
width: 260px;
height: 78px;
transition: transform .25s ease;
}
#${CONTROL_ID} .tg-btn {
position: relative;
width: 40px;
height: 40px;
cursor: pointer;
background: transparent;
}
#${CONTROL_ID} .tg-btn::before {
content: "";
position: absolute;
inset: 0;
border-radius: 50%;
background: radial-gradient(circle at 30% 30%, #ffffffdd, #d0d0d0);
box-shadow: 0 2px 6px rgba(0,0,0,.28);
backdrop-filter: blur(4px);
-webkit-backdrop-filter: blur(4px);
}
#${CONTROL_ID} .tg-btn-text {
position: relative;
width: 100%; height: 100%;
display:flex;align-items:center;justify-content:center;
font-size: 12px; font-weight: 600; color:#333; letter-spacing:2px;
pointer-events:none; text-shadow:0 1px 2px #fff;
}
#${CONTROL_ID} .tg-panel.expanded .tg-btn { display:none; }
#${CONTROL_ID} .tg-slider-wrap {
position: absolute;
inset: 0;
background: rgba(255,255,255,0.9);
border-radius: 14px;
padding: 10px 14px 8px 66px;
box-shadow: 0 4px 14px rgba(0,0,0,.25);
display: flex;
flex-direction: column;
gap: 4px;
animation: fadeIn .18s ease;
}
#${CONTROL_ID} .tg-row {
display:flex;
align-items:center;
gap:8px;
}
#${CONTROL_ID} .tg-range {
-webkit-appearance: none;
appearance: none;
width: 160px;
height: 6px;
border-radius: 3px;
background: linear-gradient(90deg,#666,#bbb);
outline: none;
cursor: pointer;
}
#${CONTROL_ID} .tg-range::-webkit-slider-thumb {
-webkit-appearance: none;
width:16px; height:16px;
border-radius:50%;
background:#fff;
border:2px solid #444;
box-shadow:0 0 0 2px #ffffff99;
cursor:pointer;
transition: transform .15s;
}
#${CONTROL_ID} .tg-range:active::-webkit-slider-thumb { transform: scale(1.1); }
#${CONTROL_ID} .tg-val {
min-width: 52px;
font-size:13px;
font-weight:600;
text-align:right;
color:#222;
}
#${CONTROL_ID} .tg-tip {
font-size:10px;
line-height:1.2;
color:#555;
text-align:right;
padding-right:2px;
word-break: break-all;
}
@keyframes fadeIn {
from { opacity:0; transform:translateY(4px);}
to { opacity:1; transform:translateY(0);}
}
`;
document.head.appendChild(style);
const panel = root.querySelector('.tg-panel');
const btn = root.querySelector('.tg-btn');
const sliderWrap = root.querySelector('.tg-slider-wrap');
const range = root.querySelector('.tg-range');
const valEl = root.querySelector('.tg-val');
let expanded = false;
let collapseTimer = null;
let peekOutTimer = null;
let peekRetractTimer = null;
function expand() {
if (expanded) return;
expanded = true;
panel.classList.add('expanded');
sliderWrap.style.display = 'flex';
clearTimers();
}
function collapse() {
if (!expanded) return;
expanded = false;
panel.classList.remove('expanded');
sliderWrap.style.display = 'none';
// 折叠后若鼠标不在面板上，安排半隐藏
schedulePeekOff(160);
}
function clearTimers() {
clearTimeout(collapseTimer);
clearTimeout(peekOutTimer);
clearTimeout(peekRetractTimer);
}
// 进入：立即展示按钮完整（添加 peek）
panel.addEventListener('pointerenter', () => {
clearTimers();
if (!expanded) panel.classList.add('peek');
});
// 离开：展开状态 → 1 秒后折叠；非展开则轻微延迟恢复半隐藏
panel.addEventListener('pointerleave', () => {
if (expanded) {
collapseTimer = setTimeout(() => {
if (!panel.matches(':hover')) collapse();
}, 1000);
} else {
// 非展开状态下离开，安排收回半隐藏
schedulePeekOff(140);
}
});
btn.addEventListener('click', (e) => {
e.stopPropagation();
expand();
});
range.addEventListener('input', () => {
grayLevel = clamp(parseInt(range.value, 10), 0, 100);
valEl.textContent = grayLevel + '%';
applyGrayscale(grayLevel);
localStorage.setItem(STORAGE_KEY, String(grayLevel));
});
document.addEventListener('click', (e) => {
if (!panel.contains(e.target) && expanded) {
collapse();
}
});
function schedulePeekOff(delay) {
clearTimeout(peekRetractTimer);
// 如果此刻还在 hover，就不收回
if (panel.matches(':hover') || expanded) return;
peekRetractTimer = setTimeout(() => {
if (!panel.matches(':hover') && !expanded) {
panel.classList.remove('peek');
}
}, delay);
}
function applyGrayscale(level) {
document.documentElement.style.filter = level ? `grayscale(${level}%)` : '';
}
function clamp(n, min, max) {
return n < min ? min : (n > max ? max : n);
}
function getBaseDomain(h) {
if (!h) return 'unknown';
const lower = h.toLowerCase();
if (lower === 'localhost') return lower;
if (/^(\d{1,3}\.){3}\d{1,3}$/.test(lower)) return lower;
if (/^\[?[a-f0-9:]+\]?$/.test(lower)) return lower;
const parts = lower.split('.');
if (parts.length <= 2) return lower;
const multiSuffixes = [
'com.cn','net.cn','org.cn','gov.cn','edu.cn','ac.cn',
'co.uk','org.uk','gov.uk','ltd.uk','plc.uk',
'com.hk','com.tw'
];
const last2 = parts.slice(-2).join('.');
const last3 = parts.slice(-3).join('.');
if (multiSuffixes.includes(last2)) {
return parts.slice(-3).join('.');
}
if (multiSuffixes.includes(last3)) {
return parts.slice(-4).join('.');
}
return last2;
}
})();