Mobile Element Selector

모바일 요소 선택기

当前为 2025-04-15 提交的版本,查看 最新版本

// ==UserScript==
// @name         Mobile Element Selector
// @author       ZNJXL
// @version      1
// @namespace http://tampermonkey.net/
// @description  모바일 요소 선택기
// @match        *://*/*
// @license      MIT
// @grant           GM_setClipboard
// ==/UserScript==

(function() {
    'use strict';

    let selecting = false;
    let selectedEl = null;
    let initialTouchedElement = null;
    let includeSiteName = false;  // 사이트명 포함 여부

    // 터치 탭/스크롤 구분용 변수
    let touchStartX = 0, touchStartY = 0;
    let touchMoved = false;
    const moveThreshold = 10; // 픽셀 이동 임계값

    // UI 관련 CSS
    const style = document.createElement('style');
    style.textContent = `
        /* 기본 폰트 및 UI */
        .mobile-block-ui {
            z-index: 9999 !important;
            touch-action: manipulation !important;
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            box-sizing: border-box;
        }
        /* 슬라이더 스타일 */
        #blocker-slider {
            width: 100%; margin: 10px 0; -webkit-appearance: none; appearance: none;
            background: #555; height: 8px; border-radius: 5px; outline: none;
        }
        #blocker-slider::-webkit-slider-thumb {
            -webkit-appearance: none; appearance: none; width: 20px; height: 20px;
            background: #4CAF50; border-radius: 50%; cursor: pointer;
            border: 2px solid #fff; box-shadow: 0 2px 5px rgba(0,0,0,0.3);
        }
        #blocker-slider::-moz-range-thumb {
            width: 20px; height: 20px; background: #4CAF50; border-radius: 50%;
            cursor: pointer; border: 2px solid #fff; box-shadow: 0 2px 5px rgba(0,0,0,0.3);
        }

        /* --- 선택된 요소 하이라이트 스타일 변경 --- */
        .selected-element {
            /* 기존 outline, box-shadow 제거 */
            background-color: rgba(255, 0, 0, 0.25) !important; /* 반투명 붉은 배경 */
            /* outline: none !important; */ /* 필요 시 outline 명시적 제거 */
            /* box-shadow: none !important; */ /* 필요 시 box-shadow 명시적 제거 */
            z-index: 9998 !important; /* 다른 요소 위에 보이도록 */
        }
        /* --- 하이라이트 스타일 변경 끝 --- */

        /* 패널 스타일 */
        #mobile-block-panel {
            position: fixed; bottom: 15px; left: 15px; right: 15px;
            background: rgba(40, 40, 40, 0.95); color: #eee; padding: 15px;
            border-radius: 12px; box-shadow: 0 5px 15px rgba(0,0,0,0.6);
            display: none; z-index: 10001; border-top: 1px solid rgba(255, 255, 255, 0.1);
        }
        /* 토글 버튼 스타일 */
        #mobile-block-toggleBtn {
            position: fixed; top: 15px; right: 15px; z-index: 10002;
            background: linear-gradient(145deg, #f44336, #d32f2f); color: #fff;
            padding: 10px 18px; border-radius: 25px; font-size: 15px; font-weight: 500;
            border: none; cursor: pointer; box-shadow: 0 4px 10px rgba(0,0,0,0.3);
            transition: background 0.3s ease, transform 0.2s ease, box-shadow 0.3s ease;
        }
        #mobile-block-toggleBtn:hover {
            transform: translateY(-2px); box-shadow: 0 6px 15px rgba(0,0,0,0.4);
        }
        #mobile-block-toggleBtn.selecting { background: linear-gradient(145deg, #4CAF50, #388E3C); }
        /* 버튼 스타일 */
        .mb-btn {
            padding: 10px; border: none; border-radius: 8px; color: #fff;
            font-size: 14px; cursor: pointer;
            transition: background 0.2s ease, transform 0.1s ease, box-shadow 0.2s ease;
            background-color: #555; text-align: center; box-shadow: 0 2px 4px rgba(0,0,0,0.2);
        }
        .mb-btn:active { transform: scale(0.97); box-shadow: inset 0 2px 4px rgba(0,0,0,0.3); }
        #blocker-copy { background: linear-gradient(145deg, #2196F3, #1976D2); }
        #blocker-toggle-site { background: linear-gradient(145deg, #9C27B0, #7B1FA2); }
        #blocker-block { background: linear-gradient(145deg, #f44336, #c62828); }
        #blocker-cancel { background: linear-gradient(145deg, #607D8B, #455A64); }
        /* 정보 텍스트 및 버튼 그리드 */
        #blocker-info-wrapper { position: relative; margin-bottom: 10px; }
        #blocker-info {
            display: block; color: #90ee90; font-size: 13px; line-height: 1.4;
            background-color: rgba(0,0,0,0.3); padding: 5px 8px; border-radius: 4px;
            word-break: break-all;
        }
        .button-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(80px, 1fr)); gap: 8px; margin-top: 15px; }
    `;
    document.head.appendChild(style);

    // UI 패널 생성
    const panel = document.createElement('div');
    panel.id = 'mobile-block-panel';
    panel.classList.add('mobile-block-ui', 'ui-ignore');
    panel.innerHTML = `
        <div id="blocker-info-wrapper">
            <span style="font-size: 12px; color: #ccc;">선택된 요소:</span>
            <span id="blocker-info">없음</span>
        </div>
        <input type="range" id="blocker-slider" min="0" max="10" value="0" class="ui-ignore">
        <div class="button-grid">
            <button id="blocker-copy" class="mb-btn ui-ignore">복사</button>
            <button id="blocker-toggle-site" class="mb-btn ui-ignore">사이트명: OFF</button>
            <button id="blocker-block" class="mb-btn ui-ignore">차단</button>
            <button id="blocker-cancel" class="mb-btn ui-ignore">취소</button>
        </div>
    `;
    document.body.appendChild(panel);

    // 토글 버튼 생성
    const toggleBtn = document.createElement('button');
    toggleBtn.id = 'mobile-block-toggleBtn';
    toggleBtn.classList.add('mobile-block-ui', 'ui-ignore');
    toggleBtn.textContent = '차단 모드';
    document.body.appendChild(toggleBtn);

    // 모드 토글 함수
    function setBlockMode(enabled) {
        selecting = enabled;
        toggleBtn.textContent = enabled ? '선택 중...' : '차단 모드';
        toggleBtn.classList.toggle('selecting', enabled);
        panel.style.display = enabled ? 'block' : 'none';
        if (!enabled && selectedEl) {
            selectedEl.classList.remove('selected-element'); // 하이라이트 제거
            selectedEl = null;
            initialTouchedElement = null;
        }
        // 모드 진입/종료 시 슬라이더와 정보 초기화
        panel.querySelector('#blocker-slider').value = 0;
        updateInfo(); // selectedEl이 null이면 '없음'으로 표시됨
    }

    // 선택된 요소 정보 업데이트
    function updateInfo() {
        const infoSpan = panel.querySelector('#blocker-info');
        infoSpan.textContent = selectedEl ? generateSelector(selectedEl) : '없음';
    }

    // *** 상세 CSS 선택자 생성 (간결화: 최대 깊이 제한 추가) ***
    function generateSelector(el) {
        if (!el || el.nodeType !== 1) return '';
        const parts = [];
        let current = el;
        const maxDepth = 5; // *** 선택자 최대 깊이 제한 (예: 5단계) ***
        let depth = 0;

        // 최대 깊이 조건 추가: && depth < maxDepth
        while (current && current.tagName && current.tagName.toLowerCase() !== 'body' && current.tagName.toLowerCase() !== 'html' && depth < maxDepth) {
            const parent = current.parentElement;
            const tagName = current.tagName.toLowerCase();
            let selectorPart = tagName;

            if (current.id) {
                selectorPart = `#${current.id}`;
                parts.unshift(selectorPart);
                depth++; // ID도 깊이에 포함
                break; // ID 발견 시 종료
            } else {
                const classes = Array.from(current.classList)
                                   .filter(c => !['selected-element', 'mobile-block-ui', 'ui-ignore'].includes(c));
                if (classes.length > 0) {
                    selectorPart = '.' + classes.join('.'); // 클래스 사용 (태그 생략)
                } else if (parent) {
                    const siblings = Array.from(parent.children);
                    let sameTagIndex = 0;
                    let found = false;
                    for (let i = 0; i < siblings.length; i++) {
                        if (siblings[i].tagName === current.tagName) {
                            sameTagIndex++;
                            if (siblings[i] === current) {
                                found = true; break;
                            }
                        }
                    }
                    if (found && sameTagIndex > 0) {
                         selectorPart = `${tagName}:nth-of-type(${sameTagIndex})`; // nth-of-type 사용
                    }
                    // else: Fallback to just tagName (already default)
                }
                parts.unshift(selectorPart);
                depth++; // 깊이 증가
            }

            if (!parent || parent.tagName.toLowerCase() === 'body' || parent.tagName.toLowerCase() === 'html') {
                break; // body 또는 html 도달 시 종료
            }
            current = parent;
        }
        return parts.join(' > '); // 최종 선택자 반환
    }

    // 터치 이벤트 관련 설정
    const uiExcludeClass = '.ui-ignore';
    document.addEventListener('touchstart', e => {
        if (!selecting || e.target.closest(uiExcludeClass)) return;
        const touch = e.touches[0];
        touchStartX = touch.clientX; touchStartY = touch.clientY; touchMoved = false;
    }, { passive: true });

    document.addEventListener('touchmove', e => {
        if (!selecting || e.target.closest(uiExcludeClass) || !e.touches[0]) return;
        if (!touchMoved) {
            const touch = e.touches[0];
            const dx = touch.clientX - touchStartX; const dy = touch.clientY - touchStartY;
            if (Math.sqrt(dx * dx + dy * dy) > moveThreshold) touchMoved = true;
        }
    }, { passive: true });

    document.addEventListener('touchend', e => {
        if (!selecting || e.target.closest(uiExcludeClass)) return;
        if (touchMoved) { touchMoved = false; return; } // 스크롤 시 무시

        e.preventDefault(); e.stopImmediatePropagation();
        const touch = e.changedTouches[0];
        // 가장 안쪽 요소 찾기
        const targetEl = document.elementFromPoint(touch.clientX, touch.clientY);

        if (!targetEl || targetEl.closest(uiExcludeClass)) return; // UI 요소면 무시

        if (selectedEl) selectedEl.classList.remove('selected-element'); // 이전 하이라이트 제거

        selectedEl = targetEl; // 새 요소 선택
        initialTouchedElement = targetEl; // 슬라이더 기준점 설정
        selectedEl.classList.add('selected-element'); // 하이라이트 적용

        // !!! 중요: 요소 선택 후 즉시 슬라이더 리셋 및 정보 업데이트 !!!
        panel.querySelector('#blocker-slider').value = 0;
        updateInfo();

    }, { capture: true, passive: false });

    // 슬라이더 이벤트 처리
    const slider = panel.querySelector('#blocker-slider');
    slider.addEventListener('input', handleSlider);
    function handleSlider(e) {
        if (!initialTouchedElement) return;
        const level = parseInt(e.target.value, 10);
        let current = initialTouchedElement;
        for (let i = 0; i < level && current.parentElement; i++) {
            if (current.parentElement.tagName.toLowerCase() === 'body' || current.parentElement.tagName.toLowerCase() === 'html') break;
            current = current.parentElement;
        }
        if (selectedEl) selectedEl.classList.remove('selected-element');
        selectedEl = current;
        selectedEl.classList.add('selected-element');
        updateInfo(); // 슬라이더 조작 시 정보 업데이트
    }

    // 복사 버튼 이벤트
    panel.querySelector('#blocker-copy').addEventListener('click', () => {
        if (selectedEl) {
            const fullSelector = generateSelector(selectedEl); // 간결화된 선택자 생성
            let finalSelector = "##" + fullSelector;
            if (includeSiteName) finalSelector = location.hostname + finalSelector;
            try {
                GM_setClipboard(finalSelector);
                alert('✅ 선택자가 복사되었습니다!\n' + finalSelector);
            } catch (err) {
                console.error("클립보드 복사 실패:", err);
                alert("❌ 클립보드 복사에 실패했습니다.");
                prompt("선택자를 직접 복사하세요:", finalSelector);
            }
        } else { alert('선택된 요소가 없습니다.'); }
    });

    // 사이트명 토글 버튼
    const toggleSiteBtn = panel.querySelector('#blocker-toggle-site');
    toggleSiteBtn.addEventListener('click', () => {
        includeSiteName = !includeSiteName;
        toggleSiteBtn.textContent = includeSiteName ? "사이트명: ON" : "사이트명: OFF";
        toggleSiteBtn.style.background = includeSiteName ? 'linear-gradient(145deg, #8E24AA, #6A1B9A)' : 'linear-gradient(145deg, #9C27B0, #7B1FA2)';
    });

    // 차단 버튼
    panel.querySelector('#blocker-block').addEventListener('click', () => {
        if (selectedEl) {
            console.log("차단 요청:", generateSelector(selectedEl));
            selectedEl.style.display = 'none';
            setBlockMode(false);
        } else { alert('차단할 요소가 선택되지 않았습니다.'); }
    });

    // 취소 버튼
    panel.querySelector('#blocker-cancel').addEventListener('click', () => setBlockMode(false));

    // 메인 토글 버튼
    toggleBtn.addEventListener('click', () => setBlockMode(!selecting));

})();