调整网页下方背景的透明度、颜色遮罩、模糊度，并支持上传本地图片作为背景。/n Adjust the transparency, color overlay, and blur of the webpage's lower background, and support uploading local images as the background.
// ==UserScript==
// @name 网页背景调节器（Webpage Background Adjuster）
// @namespace http://tampermonkey.net/
// @version 1.64
// @description 调整网页下方背景的透明度、颜色遮罩、模糊度，并支持上传本地图片作为背景。/n Adjust the transparency, color overlay, and blur of the webpage's lower background, and support uploading local images as the background.
// @author Grey333
// @match *://*/*
// @grant GM_setValue
// @grant GM_getValue
// @license MIT
// @grant GM_registerMenuCommand
// ==/UserScript==
(function() {
'use strict';
// 原始默认设置
const defaultSettings = {
transparency: 1,
blur: 0,
overlayColor: 'transparent',
overlayOpacity: 0,
forceMode: false,
disableOnThisPage: false,
backgroundImage: null,
theme: 'light',
language: 'zh'
};
// 按域名加载当前页面设置
const domainKey = `settings_${location.hostname}`;
let settings = JSON.parse(GM_getValue(domainKey, JSON.stringify(defaultSettings)));
if (!settings.language) settings.language = 'zh';
// 全局存储自定义默认配置
const customDefaultKey = 'customDefaultSettings';
let customDefaultSettings = JSON.parse(GM_getValue(customDefaultKey, null));
if (!customDefaultSettings) {
customDefaultSettings = { ...defaultSettings };
GM_setValue(customDefaultKey, JSON.stringify(customDefaultSettings));
}
// 如果该页面不生效，直接返回
GM_registerMenuCommand(settings.disableOnThisPage ? '恢复脚本在此页面生效' : '在此页面禁用脚本', () => {
settings.disableOnThisPage = !settings.disableOnThisPage;
GM_setValue(domainKey, JSON.stringify(settings));
location.reload();
});
GM_registerMenuCommand('打开背景调节器', () => {
if (!settings.disableOnThisPage) {
panel.style.display = 'block';
}
});
if (settings.disableOnThisPage) {
return;
}
// 创建样式元素
const style = document.createElement('style');
style.id = 'background-adjuster-style';
document.head.appendChild(style);
// 设置初始 CSS 变量
function applySettings() {
document.body.style.setProperty('--base-transparency', 1 - settings.transparency);
document.body.style.setProperty('--base-blur', settings.blur === 0 ? 'none' : `blur(${settings.blur}px)`);
document.body.style.setProperty('--overlay-color', settings.overlayColor);
document.body.style.setProperty('--overlay-opacity', 1 - settings.overlayOpacity);
}
// 添加默认背景层
const bgLayer = document.createElement('div');
bgLayer.id = 'background-layer';
bgLayer.style.cssText = `
position: fixed;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
z-index: -1000; /* 降低 z-index，避免干扰页面元素 */
background: ${settings.theme === 'dark' ? '#000000' : '#ffffff'};
opacity: var(--base-transparency);
filter: var(--base-blur);
pointer-events: none;
`;
document.body.insertBefore(bgLayer, document.body.firstChild);
// 添加颜色遮罩层
const overlayLayer = document.createElement('div');
overlayLayer.id = 'overlay-layer';
overlayLayer.style.cssText = `
position: fixed;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
z-index: -999; /* 略高于背景层，但仍低于页面内容 */
background: var(--overlay-color);
opacity: var(--overlay-opacity);
pointer-events: none;
`;
document.body.insertBefore(overlayLayer, document.body.firstChild.nextSibling);
// 中英文文本映射表
const textMap = {
zh: {
title: '背景调节器',
transparency: '透明度',
blur: '模糊度',
overlayColor: '颜色遮罩',
overlayOpacity: '遮罩透明度',
backgroundImage: '背景图片',
forceMode: '强制模式',
theme: '主题',
language: '语言',
saveDefault: '保存为默认配置',
applyDefault: '应用默认配置',
reset: '重置',
close: '关闭'
},
en: {
title: 'Background Adjuster',
transparency: 'Transparency',
blur: 'Blur',
overlayColor: 'Overlay Color',
overlayOpacity: 'Overlay Opacity',
backgroundImage: 'Background Image',
forceMode: 'Force Mode',
theme: 'Theme',
language: 'Language',
saveDefault: 'Save as Default',
applyDefault: 'Apply Default',
reset: 'Reset',
close: 'Close'
}
};
// 添加优化后的 CSS 样式
style.textContent = `
/* 移除 body 的 position: relative 和 background: transparent !important，避免影响页面布局 */
#background-layer {
position: fixed;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
z-index: -1000; /* 确保低于所有页面内容 */
opacity: var(--base-transparency);
filter: var(--base-blur);
pointer-events: none;
}
#overlay-layer {
position: fixed;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
z-index: -999; /* 略高于背景层，但仍低于页面内容 */
background: var(--overlay-color);
opacity: var(--overlay-opacity);
pointer-events: none;
}
/* 调整选择器，仅确保背景层和遮罩层正确显示，不影响其他元素 */
#bg-adjuster-panel {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background: ${settings.theme === 'dark' ? '#000000' : '#fafafa'};
border: none;
padding: 25px;
border-radius: 15px;
box-shadow: 0 8px 25px rgba(0,0,0,0.2);
z-index: 10000;
display: none;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
width: 300px;
max-height: 85vh;
overflow-y: auto;
color: ${settings.theme === 'dark' ? '#ffffff' : '#333'};
}
#bg-adjuster-panel label {
display: flex;
align-items: center;
margin: 15px 0;
font-size: 14px;
color: ${settings.theme === 'dark' ? '#ffffff' : '#333'};
}
#bg-adjuster-panel input[type="range"] {
flex: 1;
margin: 0 10px;
height: 10px;
border-radius: 8px;
position: relative;
outline: none;
cursor: pointer;
appearance: none;
}
#bg-adjuster-panel input[type="range"]::-webkit-slider-runnable-track {
height: 10px;
border-radius: 8px;
}
#bg-adjuster-panel input[type="range"]::-moz-range-track {
height: 10px;
border-radius: 8px;
}
#bg-adjuster-panel input[type="range"]::-webkit-slider-thumb {
appearance: none;
width: 20px;
height: 20px;
border-radius: 50%;
border: 2px solid ${settings.theme === 'dark' ? '#000000' : '#fff'};
cursor: pointer;
box-shadow: 0 3px 8px rgba(0,0,0,0.2);
margin-top: -5px;
background: ${settings.theme === 'dark' ? '#ffffff' : '#4a90e2'};
}
#bg-adjuster-panel input[type="range"]::-moz-range-thumb {
width: 20px;
height: 20px;
border-radius: 50%;
border: 2px solid ${settings.theme === 'dark' ? '#000000' : '#fff'};
cursor: pointer;
box-shadow: 0 3px 8px rgba(0,0,0,0.2);
background: ${settings.theme === 'dark' ? '#ffffff' : '#4a90e2'};
}
#bg-adjuster-panel .percentage {
width: 40px;
text-align: right;
font-size: 12px;
color: ${settings.theme === 'dark' ? '#cccccc' : '#666'};
}
#bg-adjuster-panel .color-btn {
width: 26px;
height: 26px;
border-radius: 50%;
border: 2px solid ${settings.theme === 'dark' ? '#ffffff' : '#ddd'};
cursor: pointer;
margin-right: 10px;
transition: transform 0.2s, box-shadow 0.2s;
}
#bg-adjuster-panel .color-btn:hover {
transform: scale(1.15);
box-shadow: 0 0 6px rgba(0,0,0,0.3);
}
#bg-adjuster-panel .color-btn:active {
transform: scale(1.05);
box-shadow: 0 0 8px rgba(0,0,0,0.4);
}
#bg-adjuster-panel #custom-color {
width: 40px;
height: 40px;
padding: 0;
border: 2px solid ${settings.theme === 'dark' ? '#ffffff' : '#ddd'};
border-radius: 12px;
cursor: pointer;
margin-left: auto;
box-shadow: 0 2px 6px rgba(0,0,0,0.1);
}
#bg-adjuster-panel button {
padding: 8px 14px;
cursor: pointer;
border-radius: 10px;
border: none;
font-size: 14px;
transition: background 0.2s;
}
#bg-image-label {
display: block;
margin: 15px 0;
font-size: 14px;
}
#bg-image-label input[type="file"] {
width: 100%;
font-size: 12px;
margin-top: 8px;
padding: 6px;
border: 1px solid ${settings.theme === 'dark' ? '#ffffff' : '#ddd'};
border-radius: 8px;
background: ${settings.theme === 'dark' ? '#333333' : '#fff'};
color: ${settings.theme === 'dark' ? '#ffffff' : '#333'};
}
#overlay-opacity-section {
display: none;
}
#force-mode-label, #theme-label, #language-label {
font-size: 12px;
color: ${settings.theme === 'dark' ? '#ffffff' : '#333'};
}
#theme-container {
position: absolute;
top: 10px;
left: 10px;
display: flex;
align-items: center;
}
#language-container {
position: absolute;
top: 10px;
right: 10px;
display: flex;
align-items: center;
}
#theme-select, #language-select {
margin-left: 5px;
padding: 3px;
border-radius: 5px;
font-size: 12px;
background: ${settings.theme === 'dark' ? '#333333' : '#fff'};
color: ${settings.theme === 'dark' ? '#ffffff' : '#333'};
border: 1px solid ${settings.theme === 'dark' ? '#ffffff' : '#ddd'};
}
`;
// 创建 UI 面板
const panel = document.createElement('div');
panel.id = 'bg-adjuster-panel';
document.body.appendChild(panel);
// UI 面板初始内容
panel.innerHTML = `
<div id="theme-container">
<label id="theme-label">主题:
<select id="theme-select">
<option value="light" ${settings.theme === 'light' ? 'selected' : ''}>Light</option>
<option value="dark" ${settings.theme === 'dark' ? 'selected' : ''}>Dark</option>
</select>
</label>
</div>
<div id="language-container">
<label id="language-label">语言:
<select id="language-select">
<option value="zh" ${settings.language === 'zh' ? 'selected' : ''}>中文</option>
<option value="en" ${settings.language === 'en' ? 'selected' : ''}>English</option>
</select>
</label>
</div>
<h3 style="margin: 20px 0; font-size: 16px; text-align: center; color: ${settings.theme === 'dark' ? '#ffffff' : '#333'};">背景调节器</h3>
<label id="transparency-label">透明度: <input type="range" min="0" max="1" step="0.01" id="transparency-slider" value="${settings.transparency}"><span class="percentage">${Math.round(settings.transparency * 100)}%</span></label>
<label id="blur-label">模糊度: <input type="range" min="0" max="20" step="1" id="blur-slider" value="${settings.blur}"><span class="percentage">${Math.round((settings.blur / 20) * 100)}%</span></label>
<div id="color-overlay-section">
<label id="overlay-color-label" style="display: flex; align-items: center;">颜色遮罩:
<button class="color-btn" id="none-btn" title="无"></button>
<button class="color-btn" id="yellow-btn" title="黄色"></button>
<button class="color-btn" id="green-btn" title="绿色"></button>
<input type="color" id="custom-color" value="${settings.overlayColor === 'transparent' ? '#ffffff' : settings.overlayColor}" title="自定义颜色">
</label>
</div>
<div id="overlay-opacity-section">
<label id="overlay-opacity-label">遮罩透明度: <input type="range" min="0" max="1" step="0.01" id="overlay-opacity" value="${settings.overlayOpacity}"><span class="percentage">${Math.round(settings.overlayOpacity * 100)}%</span></label>
</div>
<label id="bg-image-label">背景图片:<input type="file" id="bg-image-input" accept="image/*"></label>
<label id="force-mode-label" style="display: flex; align-items: center;">强制模式:
<input type="checkbox" id="force-mode-switch" ${settings.forceMode ? 'checked' : ''}>
</label>
<button id="save-default-btn" style="width: 100%; margin-top: 15px; background: #28a745; color: white;">保存为默认配置</button>
<button id="apply-default-btn" style="width: 100%; margin-top: 10px; background: #17a2b8; color: white;">应用默认配置</button>
<button id="reset-btn" style="width: 100%; margin-top: 10px;">重置</button>
<button id="close-btn" style="width: 100%; margin-top: 10px;">关闭</button>
`;
// 获取 UI 元素
const transparencySlider = document.getElementById('transparency-slider');
const blurSlider = document.getElementById('blur-slider');
const noneBtn = document.getElementById('none-btn');
const yellowBtn = document.getElementById('yellow-btn');
const greenBtn = document.getElementById('green-btn');
const customColor = document.getElementById('custom-color');
const overlayOpacity = document.getElementById('overlay-opacity');
const overlayOpacitySection = document.getElementById('overlay-opacity-section');
const bgImageInput = document.getElementById('bg-image-input');
const saveDefaultBtn = document.getElementById('save-default-btn');
const applyDefaultBtn = document.getElementById('apply-default-btn');
const resetBtn = document.getElementById('reset-btn');
const closeBtn = document.getElementById('close-btn');
const forceModeSwitch = document.getElementById('force-mode-switch');
const themeSelect = document.getElementById('theme-select');
const languageSelect = document.getElementById('language-select');
const backgroundLayer = document.getElementById('background-layer');
const overlayLayerElement = document.getElementById('overlay-layer');
const transparencyPercentage = transparencySlider.nextElementSibling;
const blurPercentage = blurSlider.nextElementSibling;
const overlayOpacityPercentage = overlayOpacity.nextElementSibling;
// 防抖函数
function debounce(func, wait) {
let timeout;
return function(...args) {
clearTimeout(timeout);
timeout = setTimeout(() => func.apply(this, args), wait);
};
}
// 更新设置和 UI
function updateSettings() {
settings.transparency = parseFloat(transparencySlider.value);
settings.blur = parseInt(blurSlider.value);
settings.overlayColor = customColor.value === '#ffffff' && overlayOpacity.value == 0 ? 'transparent' : customColor.value;
settings.overlayOpacity = parseFloat(overlayOpacity.value);
settings.forceMode = forceModeSwitch.checked;
settings.theme = themeSelect.value;
settings.language = languageSelect.value;
applySettings();
backgroundLayer.style.display = 'block';
overlayLayerElement.style.display = 'block';
document.body.style.setProperty('background', 'transparent'); // 移除 !important，避免覆盖页面样式
// 更新背景层颜色或图片
if (settings.backgroundImage) {
backgroundLayer.style.backgroundImage = `url(${settings.backgroundImage})`;
backgroundLayer.style.backgroundSize = 'cover';
backgroundLayer.style.backgroundRepeat = 'no-repeat';
backgroundLayer.style.backgroundColor = 'transparent';
} else {
backgroundLayer.style.backgroundImage = 'none';
backgroundLayer.style.backgroundColor = settings.theme === 'dark' ? '#000000' : '#ffffff';
}
// 更新面板背景和文字颜色
panel.style.background = settings.theme === 'dark' ? '#000000' : '#fafafa';
panel.style.color = settings.theme === 'dark' ? '#ffffff' : '#333';
const labels = panel.querySelectorAll('label');
labels.forEach(label => label.style.color = settings.theme === 'dark' ? '#ffffff' : '#333');
const h3 = panel.querySelector('h3');
h3.style.color = settings.theme === 'dark' ? '#ffffff' : '#333';
const percentages = panel.querySelectorAll('.percentage');
percentages.forEach(p => p.style.color = settings.theme === 'dark' ? '#cccccc' : '#666');
bgImageInput.style.background = settings.theme === 'dark' ? '#333333' : '#fff';
bgImageInput.style.color = settings.theme === 'dark' ? '#ffffff' : '#333';
bgImageInput.style.borderColor = settings.theme === 'dark' ? '#ffffff' : '#ddd';
themeSelect.style.background = settings.theme === 'dark' ? '#333333' : '#fff';
themeSelect.style.color = settings.theme === 'dark' ? '#ffffff' : '#333';
themeSelect.style.borderColor = settings.theme === 'dark' ? '#ffffff' : '#ddd';
languageSelect.style.background = settings.theme === 'dark' ? '#333333' : '#fff';
languageSelect.style.color = settings.theme === 'dark' ? '#ffffff' : '#333';
languageSelect.style.borderColor = settings.theme === 'dark' ? '#ffffff' : '#ddd';
// 更新百分比
transparencyPercentage.textContent = `${Math.round(settings.transparency * 100)}%`;
blurPercentage.textContent = `${Math.round((settings.blur / 20) * 100)}%`;
overlayOpacityPercentage.textContent = `${Math.round(settings.overlayOpacity * 100)}%`;
// 更新面板文字
const lang = settings.language || 'zh';
h3.textContent = textMap[lang].title;
document.getElementById('transparency-label').childNodes[0].textContent = `${textMap[lang].transparency}: `;
document.getElementById('blur-label').childNodes[0].textContent = `${textMap[lang].blur}: `;
document.getElementById('overlay-color-label').childNodes[0].textContent = `${textMap[lang].overlayColor}: `;
document.getElementById('overlay-opacity-label').childNodes[0].textContent = `${textMap[lang].overlayOpacity}: `;
document.getElementById('bg-image-label').childNodes[0].textContent = `${textMap[lang].backgroundImage}: `;
document.getElementById('force-mode-label').childNodes[0].textContent = `${textMap[lang].forceMode}: `;
document.getElementById('theme-label').childNodes[0].textContent = `${textMap[lang].theme}: `;
document.getElementById('language-label').childNodes[0].textContent = `${textMap[lang].language}: `;
saveDefaultBtn.textContent = textMap[lang].saveDefault;
applyDefaultBtn.textContent = textMap[lang].applyDefault;
resetBtn.textContent = textMap[lang].reset;
closeBtn.textContent = textMap[lang].close;
noneBtn.title = textMap[lang].language === '中文' ? '无' : 'None';
yellowBtn.title = textMap[lang].language === '中文' ? '黄色' : 'Yellow';
greenBtn.title = textMap[lang].language === '中文' ? '绿色' : 'Green';
customColor.title = textMap[lang].language === '中文' ? '自定义颜色' : 'Custom Color';
if (settings.forceMode) {
forceModeSwitch.style.setProperty('background', forceModeSwitch.checked ? '#4a90e2' : '#999', 'important');
noneBtn.style.setProperty('background', 'transparent', 'important');
noneBtn.style.setProperty('border', `2px dashed ${settings.theme === 'dark' ? '#ffffff' : '#ccc'}`, 'important');
yellowBtn.style.setProperty('background', '#ffff00', 'important');
greenBtn.style.setProperty('background', '#00ff00', 'important');
resetBtn.style.setProperty('background', '#ff3b30', 'important');
resetBtn.style.setProperty('color', 'white', 'important');
applyDefaultBtn.style.setProperty('background', '#17a2b8', 'important');
applyDefaultBtn.style.setProperty('color', 'white', 'important');
saveDefaultBtn.style.setProperty('background', '#28a745', 'important');
saveDefaultBtn.style.setProperty('color', 'white', 'important');
closeBtn.style.setProperty('background', '#4a90e2', 'important');
closeBtn.style.setProperty('color', 'white', 'important');
transparencySlider.style.setProperty('background', `linear-gradient(to right, #4a90e2 ${settings.transparency * 100}%, #e0e0e0 ${settings.transparency * 100}%)`, 'important');
blurSlider.style.setProperty('background', `linear-gradient(to right, #4a90e2 ${(settings.blur / 20) * 100}%, #e0e0e0 ${(settings.blur / 20) * 100}%)`, 'important');
overlayOpacity.style.setProperty('background', `linear-gradient(to right, #4a90e2 ${settings.overlayOpacity * 100}%, #e0e0e0 ${settings.overlayOpacity * 100}%)`, 'important');
style.textContent += `
body *:not(#bg-adjuster-panel):not(#background-layer):not(#overlay-layer):not(input):not(button):not(select):not(textarea):not(a) {
background-color: transparent !important;
background-image: none !important;
}
`;
} else {
forceModeSwitch.style.setProperty('background', forceModeSwitch.checked ? '#4a90e2' : '#999', 'important');
noneBtn.style.setProperty('background', 'transparent', 'important');
noneBtn.style.setProperty('border', `2px dashed ${settings.theme === 'dark' ? '#ffffff' : '#ccc'}`, 'important');
yellowBtn.style.setProperty('background', '#ffff00', 'important');
greenBtn.style.setProperty('background', '#00ff00', 'important');
resetBtn.style.setProperty('background', '#ff3b30', 'important');
resetBtn.style.setProperty('color', 'white', 'important');
applyDefaultBtn.style.setProperty('background', '#17a2b8', 'important');
applyDefaultBtn.style.setProperty('color', 'white', 'important');
saveDefaultBtn.style.setProperty('background', '#28a745', 'important');
saveDefaultBtn.style.setProperty('color', 'white', 'important');
closeBtn.style.setProperty('background', '#4a90e2', 'important');
closeBtn.style.setProperty('color', 'white', 'important');
transparencySlider.style.setProperty('background', `linear-gradient(to right, #4a90e2 ${settings.transparency * 100}%, #e0e0e0 ${settings.transparency * 100}%)`, 'important');
blurSlider.style.setProperty('background', `linear-gradient(to right, #4a90e2 ${(settings.blur / 20) * 100}%, #e0e0e0 ${(settings.blur / 20) * 100}%)`, 'important');
overlayOpacity.style.setProperty('background', `linear-gradient(to right, #4a90e2 ${settings.overlayOpacity * 100}%, #e0e0e0 ${settings.overlayOpacity * 100}%)`, 'important');
style.textContent = style.textContent.replace(/body \*:not\(#bg-adjuster-panel\):not\(#background-layer\):not\(#overlay-layer\):not\(input\):not\(button\):not\(select\):not\(textarea\):not\(a\) {[^}]*}/g, '');
}
overlayOpacitySection.style.display = settings.overlayColor === 'transparent' ? 'none' : 'block';
}
// 防抖版本的 updateSettings
const debouncedUpdateSettings = debounce(updateSettings, 50);
// 为开关和滑块添加事件监听
forceModeSwitch.addEventListener('change', () => {
updateSettings();
GM_setValue(domainKey, JSON.stringify(settings));
});
themeSelect.addEventListener('change', () => {
updateSettings();
GM_setValue(domainKey, JSON.stringify(settings));
});
languageSelect.addEventListener('change', () => {
updateSettings();
GM_setValue(domainKey, JSON.stringify(settings));
});
transparencySlider.addEventListener('input', debouncedUpdateSettings);
blurSlider.addEventListener('input', debouncedUpdateSettings);
overlayOpacity.addEventListener('input', debouncedUpdateSettings);
customColor.addEventListener('change', () => {
updateSettings();
GM_setValue(domainKey, JSON.stringify(settings));
});
// 为颜色按钮添加事件监听
noneBtn.addEventListener('click', () => {
customColor.value = '#ffffff';
overlayOpacity.value = 0;
updateSettings();
GM_setValue(domainKey, JSON.stringify(settings));
});
yellowBtn.addEventListener('click', () => {
customColor.value = '#ffff00';
if (settings.overlayOpacity === 0) overlayOpacity.value = 0;
updateSettings();
GM_setValue(domainKey, JSON.stringify(settings));
});
greenBtn.addEventListener('click', () => {
customColor.value = '#00ff00';
if (settings.overlayOpacity === 0) overlayOpacity.value = 0;
updateSettings();
GM_setValue(domainKey, JSON.stringify(settings));
});
// 处理背景图片上传
bgImageInput.addEventListener('change', function() {
const file = this.files[0];
if (file) {
const reader = new FileReader();
reader.onload = function(e) {
settings.backgroundImage = e.target.result;
backgroundLayer.style.backgroundImage = `url(${settings.backgroundImage})`;
backgroundLayer.style.backgroundSize = 'cover';
backgroundLayer.style.backgroundRepeat = 'no-repeat';
backgroundLayer.style.backgroundColor = 'transparent';
updateSettings();
GM_setValue(domainKey, JSON.stringify(settings));
};
reader.readAsDataURL(file);
}
});
// 保存为默认配置按钮功能
saveDefaultBtn.addEventListener('click', () => {
customDefaultSettings = { ...settings };
GM_setValue(customDefaultKey, JSON.stringify(customDefaultSettings));
alert(settings.language === 'zh' ? '已保存当前设置为默认配置！' : 'Current settings saved as default!');
});
// 应用默认配置按钮功能
applyDefaultBtn.addEventListener('click', () => {
settings.transparency = customDefaultSettings.transparency;
settings.blur = customDefaultSettings.blur;
settings.overlayColor = customDefaultSettings.overlayColor;
settings.overlayOpacity = customDefaultSettings.overlayOpacity;
settings.backgroundImage = customDefaultSettings.backgroundImage;
settings.theme = customDefaultSettings.theme;
settings.language = customDefaultSettings.language;
transparencySlider.value = settings.transparency;
blurSlider.value = settings.blur;
customColor.value = settings.overlayColor === 'transparent' ? '#ffffff' : settings.overlayColor;
overlayOpacity.value = settings.overlayOpacity;
themeSelect.value = settings.theme;
languageSelect.value = settings.language;
if (settings.backgroundImage) {
backgroundLayer.style.backgroundImage = `url(${settings.backgroundImage})`;
backgroundLayer.style.backgroundSize = 'cover';
backgroundLayer.style.backgroundRepeat = 'no-repeat';
backgroundLayer.style.backgroundColor = 'transparent';
} else {
backgroundLayer.style.backgroundImage = 'none';
backgroundLayer.style.backgroundColor = settings.theme === 'dark' ? '#000000' : '#ffffff';
}
GM_setValue(domainKey, JSON.stringify(settings));
transparencyPercentage.textContent = `${Math.round(settings.transparency * 100)}%`;
blurPercentage.textContent = `${Math.round((settings.blur / 20) * 100)}%`;
overlayOpacityPercentage.textContent = `${Math.round(settings.overlayOpacity * 100)}%`;
updateSettings();
});
// 重置按钮功能
resetBtn.addEventListener('click', () => {
backgroundLayer.style.display = 'none';
overlayLayerElement.style.display = 'none';
document.body.style.removeProperty('background'); // 恢复 body 默认背景
transparencySlider.value = 1;
blurSlider.value = 0;
customColor.value = '#ffffff';
overlayOpacity.value = 0;
forceModeSwitch.checked = false;
themeSelect.value = 'light';
languageSelect.value = settings.language;
settings.transparency = 1;
settings.blur = 0;
settings.overlayColor = 'transparent';
settings.overlayOpacity = 0;
settings.forceMode = false;
settings.backgroundImage = null;
settings.theme = 'light';
GM_setValue(domainKey, JSON.stringify(settings));
transparencyPercentage.textContent = '100%';
blurPercentage.textContent = '0%';
overlayOpacityPercentage.textContent = '0%';
forceModeSwitch.style.removeProperty('background');
noneBtn.style.removeProperty('background');
noneBtn.style.removeProperty('border');
yellowBtn.style.removeProperty('background');
greenBtn.style.removeProperty('background');
resetBtn.style.removeProperty('background');
resetBtn.style.removeProperty('color');
applyDefaultBtn.style.removeProperty('background');
applyDefaultBtn.style.removeProperty('color');
saveDefaultBtn.style.removeProperty('background');
saveDefaultBtn.style.removeProperty('color');
closeBtn.style.removeProperty('background');
closeBtn.style.removeProperty('color');
transparencySlider.style.removeProperty('background');
blurSlider.style.removeProperty('background');
overlayOpacity.style.removeProperty('background');
});
// 关闭面板
closeBtn.addEventListener('click', () => {
panel.style.display = 'none';
GM_setValue(domainKey, JSON.stringify(settings));
});
// 点击面板外关闭
document.addEventListener('click', (e) => {
if (!panel.contains(e.target) && panel.style.display === 'block') {
panel.style.display = 'none';
GM_setValue(domainKey, JSON.stringify(settings));
}
});
// 防止面板内部点击冒泡到外部关闭
panel.addEventListener('click', (e) => {
e.stopPropagation();
});
// 初始化设置
updateSettings();
})();