📋 已记录：${visitedLinksArray.length + customVisitedKeys.length} / ${MAX_LINKS}
🔗 页面链接：${document.querySelectorAll('a[href]').length}
${underlineLabels[settings.underline]} (${settings.underline})
`;
(document.body || document.documentElement).appendChild(overlay);
const card = overlay.querySelector('.glass-card');
makeDraggable(card);
const hexInput = overlay.querySelector('#hex-input');
hexInput.value = settings.color;
const svPanel = overlay.querySelector('#sv-panel');
const svBg = overlay.querySelector('.sv-bg');
const svCursor = overlay.querySelector('.sv-cursor');
const hueSlider = overlay.querySelector('#hue-slider');
const hueThumb = overlay.querySelector('.hue-thumb');
const previewBox = overlay.querySelector('#color-preview-box');
function applyColor(hex) {
settings.color = hex;
updateStyles();
previewBox.style.backgroundColor = hex;
if (document.activeElement !== hexInput) hexInput.value = hex;
clearTimeout(saveColorTimer);
saveColorTimer = setTimeout(() => GM_setValue('linkColor', hex), 200);
}
const updateFromHsv = () => {
const hex = hsvToHex(currentH, currentS, currentV);
applyColor(hex);
updateCursor();
};
const updateCursor = () => {
if (svCursor && svPanel) {
const rect = svPanel.getBoundingClientRect();
svCursor.style.left = (currentS * rect.width) + 'px';
svCursor.style.top = ((1 - currentV) * rect.height) + 'px';
}
if (hueThumb && hueSlider) hueThumb.style.left = (currentH / 360 * 100) + '%';
};
const updateSvBackground = () => { svBg.style.backgroundColor = hsvToHex(currentH, 1, 1); };
updateSvBackground();
updateFromHsv();
const setSvFromEvent = (e) => {
const rect = svPanel.getBoundingClientRect();
const clientX = e.touches ? e.touches[0].clientX : e.clientX;
const clientY = e.touches ? e.touches[0].clientY : e.clientY;
currentS = Math.min(1, Math.max(0, (clientX - rect.left) / rect.width));
currentV = 1 - Math.min(1, Math.max(0, (clientY - rect.top) / rect.height));
updateFromHsv();
};
svPanel.addEventListener('mousedown', (e) => {
e.preventDefault();
setSvFromEvent(e);
const moveH = (e) => { e.preventDefault(); setSvFromEvent(e); };
const upH = () => {
document.removeEventListener('mousemove', moveH);
document.removeEventListener('mouseup', upH);
};
document.addEventListener('mousemove', moveH);
document.addEventListener('mouseup', upH);
});
svPanel.addEventListener('touchstart', (e) => {
e.preventDefault();
setSvFromEvent(e);
const moveH = (e) => { e.preventDefault(); setSvFromEvent(e); };
const endH = () => {
document.removeEventListener('touchmove', moveH);
document.removeEventListener('touchend', endH);
};
document.addEventListener('touchmove', moveH, { passive: false });
document.addEventListener('touchend', endH);
});
const setHueFromEvent = (e) => {
const rect = hueSlider.getBoundingClientRect();
const clientX = e.touches ? e.touches[0].clientX : e.clientX;
let x = clientX - rect.left;
x = Math.min(rect.width, Math.max(0, x));
currentH = Math.round((x / rect.width) * 360);
updateSvBackground();
updateFromHsv();
};
hueSlider.addEventListener('mousedown', (e) => {
e.preventDefault();
setHueFromEvent(e);
const moveH = (e) => { e.preventDefault(); setHueFromEvent(e); };
const upH = () => {
document.removeEventListener('mousemove', moveH);
document.removeEventListener('mouseup', upH);
};
document.addEventListener('mousemove', moveH);
document.addEventListener('mouseup', upH);
});
hueSlider.addEventListener('touchstart', (e) => {
e.preventDefault();
setHueFromEvent(e);
const moveH = (e) => { e.preventDefault(); setHueFromEvent(e); };
const endH = () => {
document.removeEventListener('touchmove', moveH);
document.removeEventListener('touchend', endH);
};
document.addEventListener('touchmove', moveH, { passive: false });
document.addEventListener('touchend', endH);
});
const applyHex = (hex) => {
hex = hex.trim();
if (hex.length === 4 && /^#[0-9a-fA-F]{3}$/.test(hex)) hex = '#' + hex[1]+hex[1]+hex[2]+hex[2]+hex[3]+hex[3];
if (/^#[0-9a-fA-F]{6}$/.test(hex)) {
const newHsv = hexToHsv(hex);
currentH = newHsv.h; currentS = newHsv.s; currentV = newHsv.v;
updateSvBackground();
updateFromHsv();
}
};
hexInput.addEventListener('keydown', (e) => { if (e.key === 'Enter') applyHex(hexInput.value); });
hexInput.addEventListener('blur', () => applyHex(hexInput.value));
overlay.querySelector('#underline-preview-btn').addEventListener('click', () => {
showUnderlinePicker(settings.underline, (val) => {
settings.underline = val;
GM_setValue('underlineType', val);
updateStyles();
overlay.querySelector('#underline-label').textContent = `${underlineLabels[val]} (${val})`;
});
});
overlay.querySelector('#weight-slider').addEventListener('input', (e) => {
const val = e.target.value;
overlay.querySelector('#weight-display').textContent = val;
settings.weight = val;
updateStyles();
clearTimeout(saveWeightTimer);
saveWeightTimer = setTimeout(() => GM_setValue('linkWeight', val), 200);
});
overlay.querySelector('#alpha-slider').addEventListener('input', (e) => {
const val = parseFloat(e.target.value).toFixed(2);
overlay.querySelector('#alpha-display').textContent = val;
settings.glassAlpha = parseFloat(val);
document.documentElement.style.setProperty('--glass-alpha', val);
clearTimeout(saveAlphaTimer);
saveAlphaTimer = setTimeout(() => GM_setValue('glassAlpha', settings.glassAlpha), 200);
});
document.documentElement.style.setProperty('--glass-alpha', settings.glassAlpha);
overlay.querySelector('#blur-switch').addEventListener('change', (e) => {
settings.blurEnabled = e.target.checked;
GM_setValue('blurEnabled', settings.blurEnabled);
document.documentElement.style.setProperty('--blur', settings.blurEnabled ? '12px' : '0px');
});
const autoCleanCheckbox = overlay.querySelector('#auto-clean-switch');
const autoCleanDaysBtn = overlay.querySelector('#auto-clean-days-btn');
autoCleanCheckbox.addEventListener('change', (e) => {
autoCleanEnabled = e.target.checked;
GM_setValue('autoCleanEnabled', autoCleanEnabled);
if (autoCleanEnabled) applyAutoClean();
});
autoCleanDaysBtn.addEventListener('click', () => {
showDayPicker(autoCleanDays, (newDays) => {
autoCleanDays = newDays;
GM_setValue('autoCleanDays', autoCleanDays);
autoCleanDaysBtn.textContent = dayLabels[autoCleanDays];
if (autoCleanEnabled) applyAutoClean();
});
});
const closeBtn = overlay.querySelector('.close-btn');
const closePanel = () => overlay.classList.remove('show');
closeBtn.addEventListener('click', closePanel);
overlay.addEventListener('click', (e) => { if (e.target === overlay) closePanel(); });
return overlay;
}
/* -------- 路由监听 -------- */
function patchRouter() {
const origPush = history.pushState;
const origReplace = history.replaceState;
history.pushState = function(...args) { origPush.apply(this, args); onRouteChange(); };
history.replaceState = function(...args) { origReplace.apply(this, args); onRouteChange(); };
window.addEventListener('popstate', onRouteChange);
window.addEventListener('hashchange', onRouteChange);
}
function onRouteChange() {
clearTimeout(routeRetryTimer);
routeRetryTimer = setTimeout(() => applyVisitedStylesWithRetry(), 100);
}
function applyVisitedStylesWithRetry(maxRetries = 5, delay = 400) {
let retries = 0;
const tryApply = () => {
if (hasValidBody()) {
applyVisitedStyles();
injectAllShadowStyles();
return;
}
if (++retries < maxRetries) setTimeout(tryApply, delay);
};
tryApply();
}
/* -------- 事件监听（已修复触摸重复、右键延迟标记） -------- */
function setupEventListeners() {
document.addEventListener('click', (e) => {
if (touchHandledTarget) {
if (touchHandledTarget.contains(e.target) || e.target.contains(touchHandledTarget)) return;
}
handleInteraction(e.target);
}, true);
document.addEventListener('auxclick', (e) => {
if (e.button === 1) {
if (touchHandledTarget) {
if (touchHandledTarget.contains(e.target) || e.target.contains(touchHandledTarget)) return;
}
handleInteraction(e.target);
}
}, true);
document.addEventListener('touchstart', (e) => {
if (e.touches.length > 0) {
touchStartX = e.touches[0].clientX;
touchStartY = e.touches[0].clientY;
}
}, { passive: true });
document.addEventListener('touchend', (e) => {
const touch = e.changedTouches[0];
if (!touch) return;
const dx = Math.abs(touch.clientX - touchStartX);
const dy = Math.abs(touch.clientY - touchStartY);
if (Math.sqrt(dx*dx+dy*dy) < 10) {
touchHandledTarget = e.target;
clearTimeout(touchHandledTimer);
touchHandledTimer = setTimeout(() => { touchHandledTarget = null; }, 800);
handleInteraction(e.target);
}
}, { passive: true });
// 拖拽
document.addEventListener('dragstart', (e) => {
if (e.target.closest('.glass-overlay, .glass-card, #glass-dialog-styles')) return;
dragTarget = e.target;
dragTime = Date.now();
}, true);
document.addEventListener('dragend', () => { if (dragTarget) handleDragLink(); }, true);
// 右键菜单：记录目标并设置延迟，同时仍由 blur/visibilitychange 兜底
document.addEventListener('contextmenu', (e) => {
if (e.target.closest('.glass-overlay, .glass-card, #glass-dialog-styles')) return;
if (contextTimer) clearTimeout(contextTimer);
contextTarget = e.target;
contextTime = Date.now();
contextTimer = setTimeout(() => {
if (contextTarget) handleContextOpen();
}, 2000);
}, true);
window.addEventListener('blur', () => {
if (dragTarget && Date.now() - dragTime < 3000) handleDragLink();
if (contextTarget && Date.now() - contextTime < 3000) handleContextOpen();
});
document.addEventListener('visibilitychange', () => {
if (document.visibilityState === 'hidden') {
if (dragTarget && Date.now() - dragTime < 3000) handleDragLink();
if (contextTarget && Date.now() - contextTime < 3000) handleContextOpen();
}
});
}
function setupMutationObserver() {
observer = new MutationObserver((mutations) => {
let hasNewNodes = false;
for (const m of mutations) {
if (m.type === 'childList' && m.addedNodes.length) {
m.addedNodes.forEach(node => pendingNodes.push(node));
hasNewNodes = true;
}
}
if (hasNewNodes) {
clearTimeout(observerTimer);
observerTimer = setTimeout(flushPendingNodes, 200);
}
});
observer.observe(document.documentElement, { childList: true, subtree: true });
}
/* -------- 拦截 attachShadow 以自动注入样式 -------- */
function hookAttachShadow() {
const orig = Element.prototype.attachShadow;
Element.prototype.attachShadow = function(init) {
const shadowRoot = orig.call(this, init);
injectShadowStyle(shadowRoot);
return shadowRoot;
};
// 扫描已有 shadowRoot
document.querySelectorAll('*').forEach(el => {
if (el.shadowRoot) injectShadowStyle(el.shadowRoot);
});
}
/* -------- 初始化 -------- */
function coreInit() {
hookAttachShadow();
initVisitedLinks();
applyAutoClean();
updateStyles();
injectGlobalDialogStyles();
document.documentElement.style.setProperty('--glass-alpha', settings.glassAlpha);
document.documentElement.style.setProperty('--blur', settings.blurEnabled ? '12px' : '0px');
panelOverlay = createSettingsPanel();
GM_registerMenuCommand('⚙️ 打开已访问链接样式面板', () => {
if (panelOverlay) {
panelOverlay.classList.add('show');
updateStatsInPanel();
}
});
setupEventListeners();
setupMutationObserver();
applyVisitedStyles();
injectAllShadowStyles();
patchRouter();
// 定期自动清理与影子样式内存回收
setInterval(() => {
applyAutoClean();
cleanupShadowStyleMap();
}, 600000);
}
function attemptInit() {
if (document.body) {
coreInit();
} else {
const initObserver = new MutationObserver(() => {
if (document.body) {
initObserver.disconnect();
coreInit();
}
});
initObserver.observe(document.documentElement, { childList: true, subtree: true });
setTimeout(() => {
initObserver.disconnect();
if (document.body) coreInit();
}, 5000);
}
}
attemptInit();
window.addEventListener('visibilitychange', () => {
if (document.visibilityState === 'hidden') forceSave();
});
window.addEventListener('beforeunload', () => {
forceSave();
if (observer) observer.disconnect();
clearTimeout(observerTimer);
for (const [, data] of shadowStyleMap) if (data.observer) data.observer.disconnect();
});
})();
