소미소프트

유틸)유저스크립트-썸네일&본문 이미지 허용/비허용

cloud67p
2026-04-19 05:53:48
유틸
조회 7579 · 좋아요 4
s/all에서 썸네일 구경하다가 눈갱 당해서 만들었습니다
기존에 사용하던 썸네일 크기조절 코드에 추가된거라 이부분이 싫으시다면 AI를 활용해 보세요
기본적으로 모든 서브의 이미지와 본문은 비활성화 상태가 됩니다
우측에 서브 정보 하단부에 스위치가 추가됩니다
이렇게 허용 스위치를 켜지 않는다면
게시물에 호버했을때 썸네일이 나오지 않고
본문에 들어갔을때
선제적으로 본문 전체를 블러 처리하고 모든 이미지에 블러 처리 완료되면 본문 블러를 비활성화 합니다(이미지만 블러됨)
아까 말한 스위치를 이 상태에서 활성화시 이미지에 블러는 제거됩니다
s/all에서는 허용한 서브 목록들을 끌수만 있으며 추가는 직접 서브에 방문해야합니다
클로드 AI 활용해서 만든 코드이며, 더 좋은 코드를 위해 마음대로 재 가공 하셔도 좋습니다 MIT
코드
// ==UserScript==
// @name         Kone.gg 썸네일 크기조정 및 허용 서브 관리
// @namespace    http://tampermonkey.net/
// @version      1.0
// @description  본문 썸네일 + 미리보기 호버 썸네일 크기 통합 조정, SPA 대응, 서브별 미리보기/본문이미지 허용 관리
// @author       cloud67p
// @match        https://kone.gg/*
// @grant        GM_getValue
// @grant        GM_setValue
// @run-at       document-end
// ==/UserScript==

(function () {
    'use strict';

    /* =========================
       설정
    ========================= */
    const STORAGE_KEY_WIDTH    = 'thumbnail-width';
    const STORAGE_KEY_HEIGHT   = 'thumbnail-height';
    const STORAGE_KEY_ALLOWED  = 'preview-allowed-subs';
    const DEFAULT_WIDTH  = 500;
    const DEFAULT_HEIGHT = 500;
    const PREVIEW_MARGIN = 12;
    const MIN_SCALE = 0.55;
    const MAX_SCALE = 1.2;
    const SCALE_MIN_VIEWPORT_WIDTH = 360;
    const SCALE_MAX_VIEWPORT_WIDTH = 1920;
    const SWITCH_ID = 'kone-preview-switch-container';
    const ALLOWED_CHANGE_EVENT = 'kone-allowed-subs-changed'; // ★ 추가
    let cachedScale = null;
    const BLUR_AMOUNT = '20px'; // ★ 여기서 통합 조절

    function getViewportScale() {
        if (cachedScale !== null) return cachedScale;
        const vpW = window.innerWidth || SCALE_MIN_VIEWPORT_WIDTH;
        const normalized = (vpW - SCALE_MIN_VIEWPORT_WIDTH) / (SCALE_MAX_VIEWPORT_WIDTH - SCALE_MIN_VIEWPORT_WIDTH);
        const t = Math.max(0, Math.min(1, normalized));
        cachedScale = MIN_SCALE + (MAX_SCALE - MIN_SCALE) * t;
        return cachedScale;
    }

    /* =========================
       서브 허용 목록 관리
    ========================= */
    function getAllowedSubs() {
        try { return JSON.parse(GM_getValue(STORAGE_KEY_ALLOWED, '[]')); }
        catch (e) { return []; }
    }

    function isSubAllowed(subName) {
        if (!subName) return false;
        return getAllowedSubs().includes(subName.toLowerCase());
    }

    // ★ setSubAllowed: 저장 후 커스텀 이벤트 발행
    function setSubAllowed(subName, allowed) {
        const list = getAllowedSubs();
        const name = subName.toLowerCase();
        const idx  = list.indexOf(name);
        if (allowed && idx === -1)  list.push(name);
        if (!allowed && idx !== -1) list.splice(idx, 1);
        GM_setValue(STORAGE_KEY_ALLOWED, JSON.stringify(list));

        // 변경 이벤트 발행 → 구독 중인 UI가 즉시 갱신
        window.dispatchEvent(new CustomEvent(ALLOWED_CHANGE_EVENT, {
            detail: { sub: name, allowed }
        }));
    }

    function getCurrentSub() {
        const match = location.pathname.match(/^\/s\/([^/]+)/);
        if (!match) return null;
        const sub = match[1].toLowerCase();
        return sub === 'all' ? null : sub;
    }

    function getSubFromCard(postWrapper) {
        const links = postWrapper.querySelectorAll('a[href*="/s/"]');
        for (const link of links) {
            const m = link.getAttribute('href').match(/\/s\/([^/]+)/);
            if (m && m[1].toLowerCase() !== 'all') return m[1].toLowerCase();
        }
        return null;
    }

/* =========================
   본문 이미지 차단/복원 (Shadow DOM 대응)
========================= */
const EARLY_BLOCK_STYLE_ID = 'kone-early-post-block';
const EARLY_BLOCK_RELEASE_ID = 'kone-early-post-block-release';
const SHADOW_STYLE_ID = 'kone-shadow-img-block';

function applyEarlyPostBlock() {
    if (document.getElementById(EARLY_BLOCK_STYLE_ID)) return;
    const style = document.createElement('style');
    style.id = EARLY_BLOCK_STYLE_ID;
    style.textContent = `
        #post_content,
        #post_content + *,
        main,
        .grow.flex.flex-col,
        article {
            filter: blur(${BLUR_AMOUNT}) !important;
            transition: none !important;
            pointer-events: none !important;
            user-select: none !important;
        }
    `;
    document.head.appendChild(style);
}

function removeEarlyPostBlock() {
    const style = document.getElementById(EARLY_BLOCK_STYLE_ID);
    if (!style) return;
    const releaseStyle = document.createElement('style');
    releaseStyle.id = EARLY_BLOCK_RELEASE_ID;
    releaseStyle.textContent = `
        #post_content,
        #post_content + *,
        main,
        .grow.flex.flex-col,
        article {
            filter: none !important;
            transition: filter 0.15s ease !important;
        }
    `;
    document.head.appendChild(releaseStyle);
    style.remove();
    setTimeout(() => {
        document.getElementById(EARLY_BLOCK_RELEASE_ID)?.remove();
    }, 200);
}

// ★ display:none 버전 제거하고 blur 버전으로 통합
function applyPostImageBlock(allowed) {
    const postContent = document.getElementById('post_content');
    if (!postContent) return;
    const shadow = postContent.shadowRoot;
    if (!shadow) return;

    const existing = shadow.querySelector(`#${SHADOW_STYLE_ID}`);
    if (existing) existing.remove();

    if (!allowed) {
        const style = document.createElement('style');
        style.id = SHADOW_STYLE_ID;
        style.textContent = `
            img {
                filter: blur(${BLUR_AMOUNT}) !important;
                transition: none !important;
            }
            .image-wrapper {
                filter: blur(${BLUR_AMOUNT}) !important;
                transition: none !important;
            }
        `;
        shadow.appendChild(style);
    }
}

function applyPostImageForCurrentPage() {
    const sub = getCurrentSub();
    const isPostPage = /^\/s\/[^/]+\/.+/.test(location.pathname);
    if (!isPostPage) {
        removeEarlyPostBlock();
        return;
    }

    const allowed = sub ? isSubAllowed(sub) : false;

    if (!allowed) {
        applyEarlyPostBlock();
    } else {
        // 허용: 전체 블러 해제 + shadow 이미지 blur도 즉시 제거
        removeEarlyPostBlock();
        const postContent = document.getElementById('post_content');
        postContent?.shadowRoot?.querySelector(`#${SHADOW_STYLE_ID}`)?.remove();
        return;
    }

    let tries = 0;
    const tryApply = () => {
        const postContent = document.getElementById('post_content');
        if (postContent && postContent.shadowRoot) {
            applyPostImageBlock(allowed);
            removeEarlyPostBlock();
        } else if (tries++ < 20) {
            setTimeout(tryApply, 200);
        } else {
            removeEarlyPostBlock();
        }
    };
    tryApply();
}

(function immediatePostBlock() {
    const isPostPage = /^\/s\/[^/]+\/.+/.test(location.pathname);
    if (!isPostPage) return;
    const sub = location.pathname.match(/^\/s\/([^/]+)/)?.[1]?.toLowerCase();
    if (!sub || sub === 'all') return;
    try {
        const allowed = JSON.parse(GM_getValue('preview-allowed-subs', '[]'));
        if (!allowed.includes(sub)) {
            applyEarlyPostBlock();
        }
    } catch (e) {
        applyEarlyPostBlock();
    }
})();
    /* =========================
       사이드바 스위치
    ========================= */
    function tryInsertSwitch() {
        const isAll = /^\/s\/all(\/|$)/.test(location.pathname);
        const subName = getCurrentSub();

        const existing = document.getElementById(SWITCH_ID);
        if (existing) existing.remove();

        if (!subName && !isAll) return;

        const subText =
            [...document.querySelectorAll('*')].find(el =>
                el.children.length === 0 && el.textContent.includes('관리 로그')
            ) ||
            [...document.querySelectorAll('*')].find(el =>
                el.children.length === 0 && el.textContent.includes('구독중')
            );
        const innerPad = subText?.closest('div[class]')?.parentElement;
        if (!innerPad) return;

        const container = document.createElement('div');
        container.id = SWITCH_ID;
        container.style.cssText = 'margin-top:12px; padding-top:12px; border-top:1px solid #d4d4d8;';

        const isDark = document.documentElement.classList.contains('dark');
        if (isDark) container.style.borderTopColor = '#52525b';

        innerPad.appendChild(container);
        updateSwitchUI(container, subName, isAll);

// ★ 전역 단일 리스너 — 컨테이너 교체와 무관하게 항상 유효
window.addEventListener(ALLOWED_CHANGE_EVENT, () => {
    const container = document.getElementById(SWITCH_ID);
    if (!container) return;
    const isAll   = /^\/s\/all(\/|$)/.test(location.pathname);
    const subName = getCurrentSub();
    updateSwitchUI(container, subName, isAll);
    if (isAll) cleanupPreview();
});
    }

    function updateSwitchUI(container, subName, isAll) {
        container.innerHTML = '';

        const title = document.createElement('div');
        title.style.cssText = 'font-size:13px; margin-bottom:8px;';
        title.className = 'text-zinc-600 dark:text-zinc-400';
        title.textContent = '이미지 미리보기 / 본문';
        container.appendChild(title);

        if (isAll) {
            // ★ 매번 최신 목록을 읽어서 렌더링
            const allowedSubs = getAllowedSubs().sort();
            if (allowedSubs.length === 0) {
                const empty = document.createElement('div');
                empty.style.cssText = 'font-size:11px; color:#a1a1aa;';
                empty.textContent = '허용된 서브가 없습니다.';
                container.appendChild(empty);
            } else {
                allowedSubs.forEach(sub => container.appendChild(makeSubRow(sub, container, true)));
            }
        } else {
            container.appendChild(makeSubRow(subName, container, false));

            const labelEl = document.createElement('div');
            labelEl.id = 'kone-preview-label';
            labelEl.style.cssText = 'font-size:11px; margin-top:4px; color:#a1a1aa;';
            labelEl.textContent = isSubAllowed(subName)
                ? '허용됨 — 미리보기 및 본문 이미지가 표시됩니다.'
                : '비허용 — 미리보기 및 본문 이미지가 차단됩니다.';
            container.appendChild(labelEl);
        }
    }

    function makeSubRow(sub, container, isAll) {
        const row = document.createElement('div');
        row.style.cssText = 'display:flex; align-items:center; justify-content:space-between; gap:8px; margin-bottom:6px;';

        const label = document.createElement('span');
        label.style.cssText = 'font-size:12px;';
        label.className = 'text-zinc-500 dark:text-zinc-400';
        label.textContent = `s/${sub}`;

        const btn = document.createElement('button');
        btn.style.cssText = `
            position:relative; display:inline-flex; align-items:center;
            width:40px; height:22px; border-radius:9999px; border:none;
            cursor:pointer; transition:background 0.2s; flex-shrink:0; padding:0;
        `;
        btn.setAttribute('aria-label', `${sub} 이미지 허용 토글`);

        const knob = document.createElement('span');
        knob.style.cssText = `
            position:absolute; width:16px; height:16px; border-radius:50%;
            background:white; box-shadow:0 1px 3px rgba(0,0,0,0.3); transition:left 0.2s;
        `;
        btn.appendChild(knob);

        const applyState = () => {
            const allowed = isSubAllowed(sub);
            btn.style.background = allowed ? '#f97316' : '#a1a1aa';
            knob.style.left = allowed ? '21px' : '3px';

            if (!isAll) {
                const labelEl = container.querySelector('#kone-preview-label');
                if (labelEl) labelEl.textContent = allowed
                    ? '허용됨 — 미리보기 및 본문 이미지가 표시됩니다.'
                    : '비허용 — 미리보기 및 본문 이미지가 차단됩니다.';
            }
        };
        applyState();

btn.addEventListener('click', () => {
    const nowAllowed = isSubAllowed(sub);
    setSubAllowed(sub, !nowAllowed);
    cleanupPreview();
    applyPostImageForCurrentPage();
});

        row.appendChild(label);
        row.appendChild(btn);
        return row;
    }

    /* =========================
       본문 썸네일 조정
    ========================= */
    function applyThumbnailStyle(w, h) {
        const existing = document.getElementById('custom-thumbnail-style');
        if (existing) existing.remove();

        const scale = getViewportScale();
        const scaledW = Math.round(w * scale);
        const scaledH = Math.round(h * scale);

        const style = document.createElement('style');
        style.id = 'custom-thumbnail-style';
        style.textContent = `
            img.max-w-50.max-h-40 {
                width: auto !important;
                height: auto !important;
                max-width: ${scaledW}px !important;
                max-height: ${scaledH}px !important;
                object-fit: unset !important;
                display: block;
            }
        `;
        document.head.appendChild(style);
    }

    function resizeThumbnails() {
        const w = GM_getValue(STORAGE_KEY_WIDTH,  DEFAULT_WIDTH);
        const h = GM_getValue(STORAGE_KEY_HEIGHT, DEFAULT_HEIGHT);
        applyThumbnailStyle(w, h);
    }

    /* =========================
       호버 미리보기 위치 계산
    ========================= */
    function calcPreviewPosition(e, postWrapper, previewEl) {
        const cardRect = postWrapper.getBoundingClientRect();
        const vpW      = window.innerWidth;
        const vpH      = window.innerHeight;
        const prevW    = previewEl.offsetWidth;
        const prevH    = previewEl.offsetHeight;
        const mouseOnLeft = e.clientX < vpW / 2;

        let left;
        if (mouseOnLeft) {
            left = cardRect.right + PREVIEW_MARGIN;
            left = Math.min(left, vpW - prevW - PREVIEW_MARGIN);
        } else {
            left = cardRect.left - prevW - PREVIEW_MARGIN;
            left = Math.max(left, PREVIEW_MARGIN);
        }

        let top = cardRect.top - 200;
        top = Math.max(PREVIEW_MARGIN, Math.min(top, vpH - prevH - PREVIEW_MARGIN));
        return { left, top };
    }

    /* =========================
       호버 미리보기 관리
    ========================= */
    let activePreview  = null;
    let hiddenOriginal = null;

    function cleanupPreview() {
        if (activePreview) { activePreview.remove(); activePreview = null; }
        if (hiddenOriginal) {
            hiddenOriginal.style.display = '';
            hiddenOriginal = null;
        }
    }

    function onUrlChange() {
        cleanupPreview();
        applyPostImageForCurrentPage();
        const snapUrl = location.href;

        let attempts = 0;
        const doInsert = () => {
    if (location.href !== snapUrl) return;
    tryInsertSwitch();
    if (!document.getElementById(SWITCH_ID) && attempts++ < 10) {
        setTimeout(doInsert, 300);
    }
};

        setTimeout(doInsert, 300);
    }

let _onUrlChangeTimer = null;
function scheduleUrlChange() {
    if (_onUrlChangeTimer) clearTimeout(_onUrlChangeTimer);
    _onUrlChangeTimer = setTimeout(() => {
        _onUrlChangeTimer = null;
        onUrlChange();
    }, 50);
}

window.addEventListener('pageshow', scheduleUrlChange);
window.addEventListener('popstate', scheduleUrlChange);

const originalPushState    = history.pushState;
const originalReplaceState = history.replaceState;
history.pushState = function () {
    originalPushState.apply(history, arguments);
    scheduleUrlChange();
};
history.replaceState = function () {
    originalReplaceState.apply(history, arguments);
    scheduleUrlChange();
};

    document.addEventListener('mousedown', (e) => {
        if (e.target.closest('a') || e.target.closest('button') || e.target.closest('[role="button"]')) {
            if (activePreview) { activePreview.remove(); activePreview = null; }
            hiddenOriginal = null;
        }
    }, true);
    document.addEventListener('keydown', (e) => { if (e.key === 'Escape') cleanupPreview(); });
    window.addEventListener('beforeunload', cleanupPreview);
    document.addEventListener('visibilitychange', () => { if (document.hidden) cleanupPreview(); });

    document.addEventListener('mouseover', (e) => {
        const postWrapper = e.target.closest('.group\\/post-wrapper');
        if (!postWrapper) return;

        const preview = postWrapper.querySelector('.group-hover\\/post-wrapper\\:block');
        if (!preview) return;

        const currentSub = getCurrentSub();
        const subToCheck = currentSub || getSubFromCard(postWrapper);

        if (!subToCheck || !isSubAllowed(subToCheck)) {
            cleanupPreview();
            preview.style.display = 'none';
            return;
        }

        cleanupPreview();
        preview.style.display = 'none';
        hiddenOriginal = preview;

        const clone = preview.cloneNode(true);
        const w = GM_getValue(STORAGE_KEY_WIDTH,  DEFAULT_WIDTH);
        const h = GM_getValue(STORAGE_KEY_HEIGHT, DEFAULT_HEIGHT);

        const img = clone.querySelector('img');
        if (img) {
            img.className       = '';
            img.style.objectFit = 'unset';
            img.style.display   = 'block';

            const recalcPosition = () => {
                if (!clone.isConnected) return;
                const { left, top } = calcPreviewPosition(e, postWrapper, clone);
                clone.style.left = left + 'px';
                clone.style.top  = top  + 'px';
            };

            const applySize = () => {
                const natW = img.naturalWidth;
                const natH = img.naturalHeight;
                const vpH  = window.innerHeight;
                const scale = getViewportScale();
                const scaledW = Math.round(w * scale);
                const scaledH = Math.round(h * scale);

                if (natW > 0 && natH > 0) {
                    const ratio = natW / natH;
                    if (ratio >= 1) {
                        img.style.width     = scaledW + 'px';
                        img.style.height    = 'auto';
                        img.style.maxWidth  = 'unset';
                        img.style.maxHeight = scaledH + 'px';
                    } else {
                        const targetH = Math.round(vpH * 0.85);
                        img.style.width     = 'auto';
                        img.style.height    = targetH + 'px';
                        img.style.maxWidth  = scaledW + 'px';
                        img.style.maxHeight = 'unset';
                    }
                } else {
                    img.style.width     = 'auto';
                    img.style.height    = 'auto';
                    img.style.maxWidth  = scaledW + 'px';
                    img.style.maxHeight = scaledH + 'px';
                }
                requestAnimationFrame(recalcPosition);
            };

            if (img.complete && img.naturalWidth > 0) {
                applySize();
            } else {
                const scale = getViewportScale();
                img.style.maxWidth  = Math.round(w * scale) + 'px';
                img.style.maxHeight = Math.round(h * scale) + 'px';
                img.addEventListener('load', applySize, { once: true });
            }
        }

        clone.style.width         = 'fit-content';
        clone.style.height        = 'fit-content';
        clone.style.position      = 'fixed';
        clone.style.zIndex        = '9999';
        clone.style.pointerEvents = 'none';
        clone.style.visibility    = 'hidden';
        clone.style.display       = 'block';
        clone.style.setProperty('inset',     'auto', 'important');
        clone.style.setProperty('right',     'auto', 'important');
        clone.style.setProperty('bottom',    'auto', 'important');
        clone.style.setProperty('transform', 'none', 'important');
        clone.style.left = '0px';
        clone.style.top  = '0px';

        document.body.appendChild(clone);

        const { left, top } = calcPreviewPosition(e, postWrapper, clone);
        clone.style.left       = left + 'px';
        clone.style.top        = top  + 'px';
        clone.style.visibility = 'visible';

        activePreview = clone;
    });

    document.addEventListener('mouseout', (e) => {
        const postWrapper = e.target.closest('.group\\/post-wrapper');
        const related     = e.relatedTarget?.closest?.('.group\\/post-wrapper');
        if (postWrapper && related !== postWrapper) {
            cleanupPreview();
            const preview = postWrapper.querySelector('.group-hover\\/post-wrapper\\:block');
            if (preview) preview.style.display = '';
        }
    });

    /* =========================
       초기화 및 DOM 감시
    ========================= */
    resizeThumbnails();
let _resizeTimer = null;
window.addEventListener('resize', () => {
    cachedScale = null;
    if (_resizeTimer) clearTimeout(_resizeTimer);
    _resizeTimer = setTimeout(() => {
        _resizeTimer = null;
        resizeThumbnails();
    }, 150);
});

    setTimeout(tryInsertSwitch, 500);

})();