☰

Mobile Element Selector

모바일 요소 선택기

当前为 2025-04-16 提交的版本，查看 最新版本。

  1. // ==UserScript== 
  2. // @name         Mobile Element Selector 
  3. // @author       ZNJXL 
  4. // @version      1.1.5
  5. // @namespace    http://tampermonkey.net/ 
  6. // @description  모바일 요소 선택기 
  7. // @match        :///* /
  8. // @license      MIT 
  9. // @grant        GM_setClipboard // ==/UserScript==
  10.  
  11. (function() { 'use strict';
  12.  
  13. let selecting = false;
  14. let selectedEl = null;
  15. let initialTouchedElement = null;
  16. let includeSiteName = true;
  17. let touchStartX = 0, touchStartY = 0;
  18. let touchMoved = false;
  19. const moveThreshold = 10;
  20.  
  21. const style = document.createElement('style');
  22. style.textContent = `
  23.     .mobile-block-ui {
  24.         z-index: 9999 !important;
  25.         touch-action: manipulation !important;
  26.         font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  27.         box-sizing: border-box;
  28.         position: fixed;
  29.     }
  30.     #blocker-slider {
  31.         width: 100%; margin: 10px 0; -webkit-appearance: none; appearance: none;
  32.         background: #555; height: 8px; border-radius: 5px; outline: none;
  33.     }
  34.     #blocker-slider::-webkit-slider-thumb {
  35.         -webkit-appearance: none; appearance: none; width: 20px; height: 20px;
  36.         background: #4CAF50; border-radius: 50%; cursor: pointer;
  37.         border: 2px solid #fff; box-shadow: 0 2px 5px rgba(0,0,0,0.3);
  38.     }
  39.     #blocker-slider::-moz-range-thumb {
  40.         width: 20px; height: 20px; background: #4CAF50; border-radius: 50%;
  41.         cursor: pointer; border: 2px solid #fff; box-shadow: 0 2px 5px rgba(0,0,0,0.3);
  42.     }
  43.     .selected-element {
  44.         background-color: rgba(255, 0, 0, 0.25) !important;
  45.         z-index: 9998 !important;
  46.     }
  47.     #mobile-block-panel {
  48.         top: calc(100vh - 150px); left: 15px;
  49.         width: 300px;
  50.         background: rgba(40, 40, 40, 0.95); color: #eee; padding: 15px;
  51.         border-radius: 12px; box-shadow: 0 5px 15px rgba(0,0,0,0.6);
  52.         display: none; z-index: 10001; border-top: 1px solid rgba(255, 255, 255, 0.1);
  53.     }
  54.     #mobile-block-toggleBtn {
  55.         top: 15px; left: 15px; z-index: 10002;
  56.         background: linear-gradient(145deg, #f44336, #d32f2f); color: #fff;
  57.         padding: 10px 18px; border-radius: 25px; font-size: 15px; font-weight: 500;
  58.         border: none; cursor: pointer; box-shadow: 0 4px 10px rgba(0,0,0,0.3);
  59.         transition: background 0.3s ease, transform 0.2s ease, box-shadow 0.3s ease;
  60.         min-width: 100px;
  61.     }
  62.     #mobile-block-toggleBtn:hover {
  63.         transform: translateY(-2px); box-shadow: 0 6px 15px rgba(0,0,0,0.4);
  64.     }
  65.     #mobile-block-toggleBtn.selecting { background: linear-gradient(145deg, #4CAF50, #388E3C); }
  66.     .mb-btn {
  67.         padding: 10px; border: none; border-radius: 8px; color: #fff;
  68.         font-size: 14px; cursor: pointer;
  69.         transition: background 0.2s ease, transform 0.1s ease, box-shadow 0.2s ease;
  70.         background-color: #555; text-align: center; box-shadow: 0 2px 4px rgba(0,0,0,0.2);
  71.         min-width: 80px;
  72.     }
  73.     .mb-btn:active { transform: scale(0.97); box-shadow: inset 0 2px 4px rgba(0,0,0,0.3); }
  74.     #blocker-copy { background: linear-gradient(145deg, #2196F3, #1976D2); }
  75.     #blocker-toggle-site { background: linear-gradient(145deg, #9C27B0, #7B1FA2); color: #fff; }
  76.     #blocker-block { background: linear-gradient(145deg, #f44336, #c62828); }
  77.     #blocker-cancel { background: linear-gradient(145deg, #607D8B, #455A64); }
  78.     .button-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(80px, 1fr)); gap: 8px; margin-top: 15px; }
  79.     #blocker-info-wrapper { position: relative; margin-bottom: 10px; }
  80.     #blocker-info {
  81.         display: block; color: #90ee90; font-size: 13px; line-height: 1.4;
  82.         background-color: rgba(0,0,0,0.3); padding: 5px 8px; border-radius: 4px;
  83.         word-break: break-all;
  84.     }
  85. `;
  86. document.head.appendChild(style);
  87.  
  88. const panel = document.createElement('div');
  89. panel.id = 'mobile-block-panel';
  90. panel.classList.add('mobile-block-ui', 'ui-ignore');
  91. panel.innerHTML = `
  92.     <div id="blocker-info-wrapper">
  93.         <span style="font-size: 12px; color: #ccc;">선택된 요소:</span>
  94.         <span id="blocker-info">없음</span>
  95.     </div>
  96.     <input type="range" id="blocker-slider" min="0" max="10" value="0" class="ui-ignore">
  97.     <div class="button-grid">
  98.         <button id="blocker-copy" class="mb-btn ui-ignore">복사</button>
  99.         <button id="blocker-toggle-site" class="mb-btn ui-ignore">${includeSiteName ? "사이트명: ON" : "사이트명: OFF"}</button>
  100.         <button id="blocker-block" class="mb-btn ui-ignore">미리보기</button>
  101.         <button id="blocker-cancel" class="mb-btn ui-ignore">취소</button>
  102.     </div>
  103. `;
  104. document.body.appendChild(panel);
  105.  
  106. const toggleBtn = document.createElement('button');
  107. toggleBtn.id = 'mobile-block-toggleBtn';
  108. toggleBtn.classList.add('mobile-block-ui', 'ui-ignore');
  109. toggleBtn.textContent = '차단 모드';
  110. document.body.appendChild(toggleBtn);
  111.  
  112. function setBlockMode(enabled) {
  113.     selecting = enabled;
  114.     toggleBtn.textContent = enabled ? '선택 중...' : '차단 모드';
  115.     toggleBtn.classList.toggle('selecting', enabled);
  116.     panel.style.display = enabled ? 'block' : 'none';
  117.     if (!enabled && selectedEl) {
  118.         selectedEl.classList.remove('selected-element');
  119.         selectedEl = null;
  120.         initialTouchedElement = null;
  121.     }
  122.     panel.querySelector('#blocker-slider').value = 0;
  123.     updateInfo();
  124. }
  125.  
  126. function updateInfo() {
  127.     const infoSpan = panel.querySelector('#blocker-info');
  128.     infoSpan.textContent = selectedEl ? generateSelector(selectedEl) : '없음';
  129. }
  130.  
  131. function generateSelector(el) {
  132.     if (!el || el.nodeType !== 1) return '';
  133.     const parts = [];
  134.     let current = el;
  135.     const maxDepth = 5;
  136.     let depth = 0;
  137.     while (current && current.tagName && current.tagName.toLowerCase() !== 'body' && current.tagName.toLowerCase() !== 'html' && depth < maxDepth) {
  138.         const parent = current.parentElement;
  139.         const tagName = current.tagName.toLowerCase();
  140.         let selectorPart = tagName;
  141.         if (current.id) {
  142.             selectorPart = `#${current.id}`;
  143.             parts.unshift(selectorPart);
  144.             depth++;
  145.             break;
  146.         } else {
  147.             const classes = Array.from(current.classList).filter(c => !['selected-element', 'mobile-block-ui', 'ui-ignore'].includes(c));
  148.             if (classes.length > 0) {
  149.                 selectorPart = '.' + classes.join('.');
  150.             } else if (parent) {
  151.                 const siblings = Array.from(parent.children);
  152.                 let sameTagIndex = 0;
  153.                 let found = false;
  154.                 for (let i = 0; i < siblings.length; i++) {
  155.                     if (siblings[i].tagName === current.tagName) {
  156.                         sameTagIndex++;
  157.                         if (siblings[i] === current) { found = true; break; }
  158.                     }
  159.                 }
  160.                 if (found && sameTagIndex > 0) {
  161.                     selectorPart = `${tagName}:nth-of-type(${sameTagIndex})`;
  162.                 }
  163.             }
  164.             parts.unshift(selectorPart);
  165.             depth++;
  166.         }
  167.         if (!parent || parent.tagName.toLowerCase() === 'body' || parent.tagName.toLowerCase() === 'html') break;
  168.         current = parent;
  169.     }
  170.     return parts.join(' > ');
  171. }
  172.  
  173. const uiExcludeClass = '.ui-ignore';
  174. document.addEventListener('touchstart', e => {
  175.     if (!selecting || e.target.closest(uiExcludeClass)) return;
  176.     const touch = e.touches[0];
  177.     touchStartX = touch.clientX; touchStartY = touch.clientY; touchMoved = false;
  178. }, { passive: true });
  179. document.addEventListener('touchmove', e => {
  180.     if (!selecting || e.target.closest(uiExcludeClass) || !e.touches[0]) return;
  181.     if (!touchMoved) {
  182.         const touch = e.touches[0];
  183.         const dx = touch.clientX - touchStartX, dy = touch.clientY - touchStartY;
  184.         if (Math.sqrt(dx * dx + dy * dy) > moveThreshold) touchMoved = true;
  185.     }
  186. }, { passive: true });
  187. document.addEventListener('touchend', e => {
  188.     if (!selecting || e.target.closest(uiExcludeClass)) return;
  189.     if (touchMoved) { touchMoved = false; return; }
  190.     e.preventDefault(); e.stopImmediatePropagation();
  191.     const touch = e.changedTouches[0];
  192.     const targetEl = document.elementFromPoint(touch.clientX, touch.clientY);
  193.     if (!targetEl || targetEl.closest(uiExcludeClass)) return;
  194.     if (selectedEl) selectedEl.classList.remove('selected-element');
  195.     selectedEl = targetEl;
  196.     initialTouchedElement = targetEl;
  197.     selectedEl.classList.add('selected-element');
  198.     panel.querySelector('#blocker-slider').value = 0;
  199.     updateInfo();
  200. }, { capture: true, passive: false });
  201.  
  202. const slider = panel.querySelector('#blocker-slider');
  203. slider.addEventListener('input', handleSlider);
  204. function handleSlider(e) {
  205.     if (!initialTouchedElement) return;
  206.     const level = parseInt(e.target.value, 10);
  207.     let current = initialTouchedElement;
  208.     for (let i = 0; i < level && current.parentElement; i++) {
  209.         if (current.parentElement.tagName.toLowerCase() === 'body' || current.parentElement.tagName.toLowerCase() === 'html') break;
  210.         current = current.parentElement;
  211.     }
  212.     if (selectedEl) selectedEl.classList.remove('selected-element');
  213.     selectedEl = current;
  214.     selectedEl.classList.add('selected-element');
  215.     updateInfo();
  216. }
  217.  
  218. panel.querySelector('#blocker-copy').addEventListener('click', () => {
  219.     if (selectedEl) {
  220.         const fullSelector = generateSelector(selectedEl);
  221.         let finalSelector = "##" + fullSelector;
  222.         if (includeSiteName) finalSelector = location.hostname + finalSelector;
  223.         try {
  224.             GM_setClipboard(finalSelector);
  225.             alert('✅ 선택자가 복사되었습니다!\n' + finalSelector);
  226.         } catch (err) {
  227.             console.error("클립보드 복사 실패:", err);
  228.             alert("❌ 클립보드 복사에 실패했습니다.");
  229.             prompt("선택자를 직접 복사하세요:", finalSelector);
  230.         }
  231.     } else { alert('선택된 요소가 없습니다.'); }
  232. });
  233.  
  234. panel.querySelector('#blocker-toggle-site').addEventListener('click', () => {
  235.     includeSiteName = !includeSiteName;
  236.     panel.querySelector('#blocker-toggle-site').textContent = includeSiteName ? "사이트명: ON" : "사이트명: OFF";
  237. });
  238.  
  239. const blockBtn = panel.querySelector('#blocker-block');
  240. let isHidden = false;
  241.  
  242. blockBtn.textContent = '미리보기';
  243. blockBtn.addEventListener('click', () => {
  244.     if (!selectedEl) {
  245.         alert('선택된 요소가 없습니다.');
  246.         return;
  247.     }
  248.     if (!isHidden) {
  249.         selectedEl.dataset._original_display = selectedEl.style.display || '';
  250.         selectedEl.style.display = 'none';
  251.         blockBtn.textContent = '되돌리기';
  252.         isHidden = true;
  253.     } else {
  254.         selectedEl.style.display = selectedEl.dataset._original_display || '';
  255.         blockBtn.textContent = '미리보기';
  256.         isHidden = false;
  257.     }
  258. });
  259.  
  260. panel.querySelector('#blocker-cancel').addEventListener('click', () => setBlockMode(false));
  261. toggleBtn.addEventListener('click', () => setBlockMode(!selecting));
  262.  
  263. function makeDraggable(el) {
  264.     let startX, startY, origX, origY;
  265.     let dragging = false, moved = false;
  266.     el.addEventListener('touchstart', function(e) {
  267.         if (e.target.tagName.toLowerCase() === 'input') return;
  268.         startX = e.touches[0].clientX;
  269.         startY = e.touches[0].clientY;
  270.         const rect = el.getBoundingClientRect();
  271.         origX = rect.left;
  272.         origY = rect.top;
  273.         dragging = true;
  274.         moved = false;
  275.     }, {passive: true});
  276.     el.addEventListener('touchmove', function(e) {
  277.         if (!dragging) return;
  278.         const dx = e.touches[0].clientX - startX;
  279.         const dy = e.touches[0].clientY - startY;
  280.         if (Math.sqrt(dx * dx + dy * dy) > moveThreshold) {
  281.             moved = true;
  282.             el.style.left = (origX + dx) + 'px';
  283.             el.style.top = (origY + dy) + 'px';
  284.             el.style.right = 'auto';
  285.             el.style.bottom = 'auto';
  286.             e.preventDefault();
  287.         }
  288.     }, {passive: false});
  289.     el.addEventListener('touchend', function(e) {
  290.         dragging = false;
  291.         if(moved) {
  292.             e.preventDefault();
  293.             e.stopPropagation();
  294.         }
  295.     }, {passive: false});
  296. }
  297.  
  298. makeDraggable(panel);
  299. makeDraggable(toggleBtn);
  300.  
  301. })();