单张或者全局图片隐藏与显示
// ==UserScript==
// @name 图片隐藏
// @namespace http://tampermonkey.net/
// @version 1.3
// @description 单张或者全局图片隐藏与显示
// @match *://*/*
// @author eternal5130
// @license MIT
// @grant GM_setValue
// @grant GM_getValue
// @grant GM_registerMenuCommand
// @grant GM_addStyle
// ==/UserScript==
(function() {
'use strict';
const STORAGE_KEY_SHORTCUT = 'imageHiderShortcut_v2';
const STORAGE_KEY_GLOBAL_HIDE = 'imageHiderGlobalHideState_v2';
const CSS_CLASS_HIDDEN = 'image-hider--hidden';
const CSS_CLASS_OVERLAY = 'image-hider--overlay';
const CSS_MODAL_ID = 'image-hider-modal-styles';
const DEFAULT_SHORTCUT = {
single: { keys: ['MouseMiddle'] },
global: { keys: ['AltLeft', 'KeyH'] }
};
const DEBOUNCE_DELAY = 250;
const THROTTLE_DELAY = 50;
const imageStates = new Map();
const currentPressedKeys = new Set();
let currentHoverTarget = null;
let configModal = null;
let globalImageCounter = 0;
let mutationObserver = null;
const KEY_NAME_MAP = {
'AltLeft': 'Alt (左)', 'AltRight': 'Alt (右)',
'ControlLeft': 'Ctrl (左)', 'ControlRight': 'Ctrl (右)',
'ShiftLeft': 'Shift (左)', 'ShiftRight': 'Shift (右)',
'MetaLeft': 'Meta (左)', 'MetaRight': 'Meta (右)',
'MouseLeft': '鼠标左键', 'MouseMiddle': '鼠标中键', 'MouseRight': '鼠标右键',
'KeyA': 'A', 'KeyB': 'B', 'KeyC': 'C', 'KeyD': 'D', 'KeyE': 'E',
'KeyF': 'F', 'KeyG': 'G', 'KeyH': 'H', 'KeyI': 'I', 'KeyJ': 'J',
'KeyK': 'K', 'KeyL': 'L', 'KeyM': 'M', 'KeyN': 'N', 'KeyO': 'O',
'KeyP': 'P', 'KeyQ': 'Q', 'KeyR': 'R', 'KeyS': 'S', 'KeyT': 'T',
'KeyU': 'U', 'KeyV': 'V', 'KeyW': 'W', 'KeyX': 'X', 'KeyY': 'Y', 'KeyZ': 'Z',
'Digit0': '0', 'Digit1': '1', 'Digit2': '2', 'Digit3': '3',
'Digit4': '4', 'Digit5': '5', 'Digit6': '6', 'Digit7': '7',
'Digit8': '8', 'Digit9': '9'
};
function getKeyDisplayName(code) {
return KEY_NAME_MAP[code] || code;
}
function throttle(func, limit) {
let inThrottle;
return function(...args) {
const context = this;
if (!inThrottle) {
func.apply(context, args);
inThrottle = true;
setTimeout(() => inThrottle = false, limit);
}
}
}
function getShortcutConfig() {
try {
const savedConfig = GM_getValue(STORAGE_KEY_SHORTCUT);
const parsed = savedConfig ? JSON.parse(savedConfig) : {};
return {
single: { keys: parsed?.single?.keys || DEFAULT_SHORTCUT.single.keys },
global: { keys: parsed?.global?.keys || DEFAULT_SHORTCUT.global.keys }
};
} catch (error) {
// console.error('Image Hider: Failed to get shortcut config, using defaults.', error);
return { ...DEFAULT_SHORTCUT };
}
}
function saveShortcutConfig(config) {
try {
GM_setValue(STORAGE_KEY_SHORTCUT, JSON.stringify(config));
} catch (error) {
// console.error('Image Hider: Failed to save shortcut config.', error);
alert('保存配置时出错，请重试');
}
}
function getGlobalHideState() {
return GM_getValue(STORAGE_KEY_GLOBAL_HIDE, false);
}
function setGlobalHideState(state) {
GM_setValue(STORAGE_KEY_GLOBAL_HIDE, state);
}
class ImageState {
constructor(imgElement) {
this.element = imgElement;
this.isHidden = false;
this.overlay = null;
this.observers = new Set();
this.lastToggleTime = 0;
this.userManuallyShown = false;
this.isProcessing = false;
}
cleanup() {
this.observers.forEach(observer => observer.disconnect());
this.observers.clear();
if (this.overlay) {
this.overlay.cleanup?.();
this.overlay.remove();
this.overlay = null;
}
}
}
function ensureImageState(imgElement) {
if (!imgElement || !(imgElement instanceof HTMLImageElement)) return null;
let imageId = imgElement.dataset.imageId;
if (!imageId) {
imageId = `img_hider_${++globalImageCounter}`;
imgElement.dataset.imageId = imageId;
}
if (!imageStates.has(imageId)) {
imageStates.set(imageId, new ImageState(imgElement));
}
return imageStates.get(imageId);
}
function createOverlay(imgElement, state) {
if (!imgElement?.parentNode || !state) return null;
const overlay = document.createElement('div');
overlay.className = CSS_CLASS_OVERLAY;
overlay.dataset.linkedImageId = imgElement.dataset.imageId;
const updatePosition = throttle(() => {
if (!imgElement || !imgElement.parentNode || !document.body.contains(imgElement)) {
state.cleanup();
imageStates.delete(imgElement.dataset.imageId);
return;
}
const rect = imgElement.getBoundingClientRect();
if (rect.width > 0 && rect.height > 0 && rect.top >= 0 && rect.left >= 0 && rect.bottom <= window.innerHeight && rect.right <= window.innerWidth) {
Object.assign(overlay.style, {
left: `${rect.left + window.scrollX}px`,
top: `${rect.top + window.scrollY}px`,
width: `${rect.width}px`,
height: `${rect.height}px`,
});
if (!document.body.contains(overlay)) {
document.body.appendChild(overlay);
}
}
}, THROTTLE_DELAY);
requestAnimationFrame(updatePosition);
const intersectionObserver = new IntersectionObserver((entries) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
requestAnimationFrame(updatePosition);
}
});
}, { threshold: 0.1 });
intersectionObserver.observe(imgElement);
state.observers.add(intersectionObserver);
const resizeObserver = new ResizeObserver(() => requestAnimationFrame(updatePosition));
resizeObserver.observe(imgElement);
state.observers.add(resizeObserver);
const scrollHandler = () => requestAnimationFrame(updatePosition);
window.addEventListener('scroll', scrollHandler, { passive: true, capture: true });
overlay.addEventListener('mouseover', () => {
currentHoverTarget = state.element;
});
overlay.addEventListener('mouseout', () => {
currentHoverTarget = null;
});
overlay.addEventListener('mousedown', (e) => {
if (e.button === 1) {
e.preventDefault();
const shortcutConfig = getShortcutConfig();
if (shortcutConfig.single.keys.includes('MouseMiddle') && currentHoverTarget === state.element) {
currentPressedKeys.add('MouseMiddle');
checkShortcut();
currentPressedKeys.delete('MouseMiddle');
} else {
toggleImageVisibility(state.element);
}
}
});
overlay.cleanup = () => {
window.removeEventListener('scroll', scrollHandler, { capture: true });
};
document.body.appendChild(overlay);
return overlay;
}
function toggleImageVisibility(imgElement, forceHide = null, isInitialAutoHide = false) {
const state = ensureImageState(imgElement);
if (!state || !state.element?.parentNode || !document.body.contains(state.element)) {
if (state && imgElement?.dataset?.imageId) {
state.cleanup();
imageStates.delete(imgElement.dataset.imageId);
}
return;
}
const currentTime = Date.now();
if (state.isProcessing || (currentTime - state.lastToggleTime < DEBOUNCE_DELAY)) {
return;
}
state.isProcessing = true;
state.lastToggleTime = currentTime;
if (isInitialAutoHide && state.userManuallyShown) {
state.isProcessing = false;
return;
}
const shouldHide = (forceHide !== null) ? forceHide : !state.isHidden;
if (!isInitialAutoHide && !shouldHide) {
state.userManuallyShown = true;
} else if (!isInitialAutoHide && shouldHide) {
state.userManuallyShown = false;
}
try {
if (shouldHide) {
state.element.classList.add(CSS_CLASS_HIDDEN);
if (!state.overlay) {
state.overlay = createOverlay(state.element, state);
}
if (state.overlay && !document.body.contains(state.overlay)) {
document.body.appendChild(state.overlay);
}
} else {
state.element.classList.remove(CSS_CLASS_HIDDEN);
if (state.overlay) {
state.cleanup();
}
}
state.isHidden = shouldHide;
} catch (error) {
// console.error('Image Hider: Error toggling visibility for', state.element, error);
} finally {
setTimeout(() => {
state.isProcessing = false;
}, DEBOUNCE_DELAY + 50);
}
}
function toggleAllImages() {
const images = document.getElementsByTagName('img');
const shouldHide = !getGlobalHideState();
setGlobalHideState(shouldHide);
requestAnimationFrame(() => {
Array.from(images).forEach(img => {
ensureImageState(img);
toggleImageVisibility(img, shouldHide, false);
});
if (shouldHide) {
imageStates.forEach(state => state.userManuallyShown = false);
}
});
}
function processImages(imageList, applyGlobalState) {
Array.from(imageList).forEach(img => {
const state = ensureImageState(img);
if (state && applyGlobalState) {
if (!state.isHidden) {
img.classList.add(CSS_CLASS_HIDDEN);
toggleImageVisibility(img, true, true);
}
} else if (state && !applyGlobalState && state.isHidden) {
toggleImageVisibility(img, false, false);
}
});
}
function initAutoHideAndObserver() {
const globalShouldHide = getGlobalHideState();
processImages(document.getElementsByTagName('img'), globalShouldHide);
if (mutationObserver) mutationObserver.disconnect();
mutationObserver = new MutationObserver((mutations) => {
const currentGlobalHideState = getGlobalHideState();
mutations.forEach(mutation => {
if (mutation.addedNodes.length) {
mutation.addedNodes.forEach(node => {
if (node.nodeType === Node.ELEMENT_NODE) {
const newImages = [];
if (node.tagName === 'IMG') {
newImages.push(node);
} else if (node.querySelectorAll) {
newImages.push(...node.querySelectorAll('img'));
}
if (newImages.length > 0) {
processImages(newImages, currentGlobalHideState);
}
}
});
}
if (mutation.removedNodes.length) {
mutation.removedNodes.forEach(node => {
if (node.nodeType === Node.ELEMENT_NODE) {
const removedImages = [];
if (node.tagName === 'IMG' && node.dataset.imageId) {
removedImages.push(node);
} else if (node.querySelectorAll) {
removedImages.push(...node.querySelectorAll('img[data-image-id]'));
}
removedImages.forEach(img => {
const imageId = img.dataset.imageId;
if (imageId && imageStates.has(imageId)) {
const state = imageStates.get(imageId);
state.cleanup();
imageStates.delete(imageId);
}
});
}
});
}
if (mutation.type === 'attributes' && mutation.attributeName === 'src') {
const imgElement = mutation.target;
if (imgElement.tagName === 'IMG' && getGlobalHideState()) {
const state = ensureImageState(imgElement);
if (state && !state.isHidden) {
imgElement.classList.add(CSS_CLASS_HIDDEN);
toggleImageVisibility(imgElement, true, true);
}
}
}
});
});
mutationObserver.observe(document.body, {
childList: true,
subtree: true,
attributes: true,
attributeFilter: ['src']
});
}
function handleKeyDown(event) {
const targetTagName = event.target.tagName.toLowerCase();
if (['input', 'textarea', 'select'].includes(targetTagName) || event.target.isContentEditable) {
return;
}
currentPressedKeys.add(event.code);
checkShortcut();
}
function handleKeyUp(event) {
currentPressedKeys.delete(event.code);
}
function handleMouseDown(event) {
if (event.button === 1) {
const shortcutConfig = getShortcutConfig();
if (shortcutConfig.single.keys.includes('MouseMiddle') && currentHoverTarget) {
event.preventDefault();
}
currentPressedKeys.add('MouseMiddle');
checkShortcut();
}
}
function handleMouseUp(event) {
if (event.button === 1) {
currentPressedKeys.delete('MouseMiddle');
}
}
function handleMouseOver(event) {
if (event.target.tagName === 'IMG') {
currentHoverTarget = event.target;
ensureImageState(currentHoverTarget);
} else if (event.target.classList?.contains(CSS_CLASS_OVERLAY)) {
const linkedImageId = event.target.dataset.linkedImageId;
const state = linkedImageId ? imageStates.get(linkedImageId) : null;
if (state?.element) {
currentHoverTarget = state.element;
}
}
}
function handleMouseOut(event) {
if (event.target === currentHoverTarget || event.target.classList?.contains(CSS_CLASS_OVERLAY)) {
if (!event.relatedTarget || (event.relatedTarget !== currentHoverTarget && !event.relatedTarget.classList?.contains(CSS_CLASS_OVERLAY))) {
currentHoverTarget = null;
}
}
}
function resetStateOnUnload() {
currentPressedKeys.clear();
currentHoverTarget = null;
if (mutationObserver) {
mutationObserver.disconnect();
mutationObserver = null;
}
}
function checkShortcut() {
const shortcutConfig = getShortcutConfig();
const isExactMatch = (keys) => {
return keys.length === currentPressedKeys.size && keys.every(key => currentPressedKeys.has(key));
}
if (currentHoverTarget && isExactMatch(shortcutConfig.single.keys)) {
toggleImageVisibility(currentHoverTarget);
}
if (isExactMatch(shortcutConfig.global.keys)) {
toggleAllImages();
currentPressedKeys.clear();
}
}
function createConfigModal() {
if (configModal) return;
injectGlobalStyles();
configModal = document.createElement('div');
configModal.className = 'image-hider-modal';
configModal.id = 'image-hider-config-modal';
const currentConfig = getShortcutConfig();
let tempSingleKeys = new Set(currentConfig.single.keys);
let tempGlobalKeys = new Set(currentConfig.global.keys);
let isRecording = false;
let currentRecordingType = null;
let recordingCleanup = null;
function formatKeys(keys) {
return Array.from(keys).map(getKeyDisplayName).join(' + ') || '无';
}
function renderModalContent() {
const singleShortcutDisplay = formatKeys(tempSingleKeys);
const globalShortcutDisplay = formatKeys(tempGlobalKeys);
configModal.innerHTML = `
<button class="close-btn" id="imageHiderCloseConfigBtn" title="关闭"></button>
<h2>图片隐藏快捷键配置</h2>
<div class="shortcut-section">
<h3>单个图片快捷键 (悬停触发)</h3>
<div class="current-shortcut"><strong>当前:</strong> <span id="singleCurrentDisplay">${singleShortcutDisplay}</span></div>
<input type="text" readonly class="shortcut-input" id="singleShortcutInput" placeholder="点击下方按钮开始录制...">
<div class="button-wrapper"><button id="setSingleShortcutBtn" data-type="single">设置快捷键</button></div>
</div>
<div class="shortcut-section">
<h3>全局图片快捷键 (切换所有)</h3>
<div class="current-shortcut"><strong>当前:</strong> <span id="globalCurrentDisplay">${globalShortcutDisplay}</span></div>
<input type="text" readonly class="shortcut-input" id="globalShortcutInput" placeholder="点击下方按钮开始录制...">
<div class="button-wrapper"><button id="setGlobalShortcutBtn" data-type="global">设置快捷键</button></div>
</div>
<div class="button-group"><button id="saveConfigBtn">保存设置</button></div>
<div class="hint">说明: 录制时按下组合键，松开最后一个键完成录制。支持 Alt, Ctrl, Shift, Meta (Win/Cmd), 字母, 数字, 鼠标中键。全局状态会在页面加载时自动应用。</div>
<div id="imageHiderSuccessMessage" class="success-message"></div>
`;
attachModalListeners();
}
function updateInputDisplay(inputElement, keysSet) {
inputElement.value = formatKeys(keysSet);
}
function startRecording(type) {
if (isRecording) return;
const inputElement = configModal.querySelector(`#${type}ShortcutInput`);
const buttonElement = configModal.querySelector(`#set${type.charAt(0).toUpperCase() + type.slice(1)}ShortcutBtn`);
const keysSet = (type === 'single') ? tempSingleKeys : tempGlobalKeys;
isRecording = true;
currentRecordingType = type;
keysSet.clear();
inputElement.value = '请按下快捷键...';
inputElement.classList.add('recording');
buttonElement.textContent = '录制中... (松开完成)';
buttonElement.disabled = true;
const pressedWhileRecording = new Set();
const keydownHandler = (e) => {
e.preventDefault(); e.stopPropagation();
const code = e.code;
if (!pressedWhileRecording.has(code)) {
pressedWhileRecording.add(code);
keysSet.add(code);
updateInputDisplay(inputElement, keysSet);
}
};
const mousedownHandler = (e) => {
if (e.button === 1) {
e.preventDefault(); e.stopPropagation();
const code = 'MouseMiddle';
if (!pressedWhileRecording.has(code)) {
pressedWhileRecording.add(code);
keysSet.add(code);
updateInputDisplay(inputElement, keysSet);
}
}
};
const stopRecordingHandler = (e) => {
if (pressedWhileRecording.size > 0) {
e.preventDefault(); e.stopPropagation();
finishRecording();
}
};
document.addEventListener('keydown', keydownHandler, { capture: true });
document.addEventListener('mousedown', mousedownHandler, { capture: true });
document.addEventListener('keyup', stopRecordingHandler, { capture: true, once: true });
document.addEventListener('mouseup', stopRecordingHandler, { capture: true, once: true });
recordingCleanup = () => {
document.removeEventListener('keydown', keydownHandler, { capture: true });
document.removeEventListener('mousedown', mousedownHandler, { capture: true });
document.removeEventListener('keyup', stopRecordingHandler, { capture: true });
document.removeEventListener('mouseup', stopRecordingHandler, { capture: true });
recordingCleanup = null;
};
}
function finishRecording() {
if (!isRecording) return;
const type = currentRecordingType;
const inputElement = configModal.querySelector(`#${type}ShortcutInput`);
const buttonElement = configModal.querySelector(`#set${type.charAt(0).toUpperCase() + type.slice(1)}ShortcutBtn`);
const keysSet = (type === 'single') ? tempSingleKeys : tempGlobalKeys;
isRecording = false;
currentRecordingType = null;
inputElement.classList.remove('recording');
buttonElement.textContent = '设置快捷键';
buttonElement.disabled = false;
updateInputDisplay(inputElement, keysSet);
if (keysSet.size === 0) {
inputElement.value = '';
inputElement.placeholder = '未设置 - 点击按钮录制';
}
if (recordingCleanup) recordingCleanup();
}
function closeModal() {
if (isRecording) finishRecording();
if (configModal) {
configModal.classList.add('closing');
configModal.addEventListener('transitionend', () => {
configModal?.remove();
configModal = null;
}, { once: true });
}
document.removeEventListener('mousedown', backdropClickHandler);
}
function showSuccessMessage(message) {
const msgElement = configModal?.querySelector('#imageHiderSuccessMessage');
if (msgElement) {
msgElement.textContent = message;
msgElement.classList.add('show');
setTimeout(() => {
msgElement.classList.remove('show');
}, 1500);
}
}
function backdropClickHandler(event) {
if (configModal && !configModal.contains(event.target)) {
closeModal();
}
}
function attachModalListeners() {
configModal.querySelector('#imageHiderCloseConfigBtn').addEventListener('click', closeModal);
configModal.querySelector('#setSingleShortcutBtn').addEventListener('click', () => startRecording('single'));
configModal.querySelector('#setGlobalShortcutBtn').addEventListener('click', () => startRecording('global'));
configModal.querySelector('#saveConfigBtn').addEventListener('click', () => {
if (isRecording) finishRecording();
const newConfig = {
single: { keys: Array.from(tempSingleKeys) },
global: { keys: Array.from(tempGlobalKeys) }
};
saveShortcutConfig(newConfig);
configModal.querySelector('#singleCurrentDisplay').textContent = formatKeys(tempSingleKeys);
configModal.querySelector('#globalCurrentDisplay').textContent = formatKeys(tempGlobalKeys);
showSuccessMessage('设置已保存！');
});
setTimeout(() => { document.addEventListener('mousedown', backdropClickHandler); }, 0);
}
renderModalContent();
document.body.appendChild(configModal);
requestAnimationFrame(() => { configModal.style.opacity = '1'; });
}
function injectGlobalStyles() {
if (document.getElementById(CSS_MODAL_ID)) return;
GM_addStyle(`
.${CSS_CLASS_HIDDEN} { opacity: 0 !important; pointer-events: none !important; transition: opacity 0.2s ease !important; }
.${CSS_CLASS_OVERLAY} { position: absolute; background-color: transparent; border: 1px dashed rgba(128, 128, 128, 0.3); cursor: pointer; pointer-events: auto; z-index: 9998; box-sizing: border-box; }
.image-hider-modal { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); background: #fff; border-radius: 12px; box-shadow: 0 10px 30px rgba(0,0,0,0.2); padding: 28px; z-index: 10000; width: 90%; max-width: 480px; max-height: 85vh; overflow-y: auto; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif; opacity: 0; transition: opacity 0.25s ease-out, transform 0.25s ease-out; box-sizing: border-box; }
.image-hider-modal.closing { opacity: 0; transform: translate(-50%, -45%); transition: opacity 0.2s ease-in, transform 0.2s ease-in; }
.image-hider-modal * { box-sizing: border-box; }
.image-hider-modal h2 { color: #333; margin: 0 0 24px 0; font-size: 1.4em; font-weight: 600; text-align: center; }
.image-hider-modal .shortcut-section { background: #f7f7f7; border-radius: 8px; padding: 16px; margin-bottom: 20px; border: 1px solid #eee; }
.image-hider-modal .shortcut-section h3 { color: #444; margin: 0 0 12px 0; font-size: 1.1em; font-weight: 500; }
.image-hider-modal .current-shortcut { background-color: #fff; padding: 10px 14px; margin-bottom: 12px; border-radius: 6px; border: 1px solid #e0e0e0; color: #555; font-size: 0.95em; min-height: 40px; display: flex; align-items: center; }
.image-hider-modal .current-shortcut strong { margin-right: 8px; }
.image-hider-modal .shortcut-input { width: 100%; height: 40px; padding: 8px 12px; margin: 8px 0 12px 0; border: 1px solid #ccc; border-radius: 6px; font-size: 1em; text-align: center; background: #fff; color: #333; transition: border-color 0.2s, box-shadow 0.2s; }
.image-hider-modal .shortcut-input:focus, .image-hider-modal .shortcut-input.recording { border-color: #4CAF50; outline: none; box-shadow: 0 0 0 2px rgba(76, 175, 80, 0.2); }
.image-hider-modal .shortcut-input.recording { background: #e8f5e9; }
.image-hider-modal .shortcut-input::placeholder { color: #999; }
.image-hider-modal .button-wrapper { display: flex; justify-content: center; }
.image-hider-modal button { padding: 9px 18px; border-radius: 6px; border: 1px solid transparent; cursor: pointer; font-size: 0.95em; font-weight: 500; transition: background-color 0.2s, border-color 0.2s, color 0.2s; min-width: 110px; height: 38px; line-height: 1.5; display: inline-flex; align-items: center; justify-content: center; margin: 0; }
.image-hider-modal button:disabled { cursor: not-allowed; opacity: 0.7; }
.image-hider-modal #setSingleShortcutBtn, .image-hider-modal #setGlobalShortcutBtn { background-color: #f0f0f0; color: #333; border-color: #ccc; width: auto; }
.image-hider-modal #setSingleShortcutBtn:hover:not(:disabled), .image-hider-modal #setGlobalShortcutBtn:hover:not(:disabled) { background-color: #e0e0e0; border-color: #bbb; }
.image-hider-modal .button-group { display: flex; gap: 12px; margin-top: 24px; justify-content: center; }
.image-hider-modal #saveConfigBtn { background-color: #4CAF50; color: white; min-width: 140px; font-size: 1em; }
.image-hider-modal #saveConfigBtn:hover { background-color: #45a049; }
.image-hider-modal .close-btn { position: absolute; right: 12px; top: 12px; width: 30px; height: 30px; border-radius: 50%; background: #f1f1f1; border: none; cursor: pointer; transition: background-color 0.2s, transform 0.2s; padding: 0; min-width: auto; display: flex; align-items: center; justify-content: center; color: #666; }
.image-hider-modal .close-btn:hover { background: #e0e0e0; transform: rotate(90deg); }
.image-hider-modal .close-btn::before, .image-hider-modal .close-btn::after { content: ''; position: absolute; width: 14px; height: 2px; background: currentColor; border-radius: 1px; }
.image-hider-modal .close-btn::before { transform: rotate(45deg); }
.image-hider-modal .close-btn::after { transform: rotate(-45deg); }
.image-hider-modal .hint { color: #666; font-size: 0.85em; margin-top: 20px; line-height: 1.5; padding: 12px; background: #f9f9f9; border-radius: 6px; border: 1px solid #eee; }
.image-hider-modal .success-message { position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%); background: rgba(76, 175, 80, 0.9); color: white; padding: 10px 20px; border-radius: 6px; font-weight: 500; opacity: 0; transition: opacity 0.3s ease; pointer-events: none; z-index: 10001; }
.image-hider-modal .success-message.show { opacity: 1; }
`);
const styleElement = document.querySelector(`style[id="${CSS_MODAL_ID}"]`);
if (styleElement) styleElement.id = CSS_MODAL_ID;
}
function initialize() {
injectGlobalStyles();
document.addEventListener('keydown', handleKeyDown, { capture: true });
document.addEventListener('keyup', handleKeyUp, { capture: true });
document.addEventListener('mousedown', handleMouseDown, { capture: true });
document.addEventListener('mouseup', handleMouseUp, { capture: true });
document.addEventListener('mouseover', handleMouseOver, { capture: false });
document.addEventListener('mouseout', handleMouseOut, { capture: false });
window.addEventListener('beforeunload', resetStateOnUnload);
window.addEventListener('blur', () => currentPressedKeys.clear());
GM_registerMenuCommand('配置快捷键', createConfigModal);
if (document.readyState === 'loading') {
document.addEventListener('DOMContentLoaded', initAutoHideAndObserver);
} else {
initAutoHideAndObserver();
}
}
initialize();
})();