Mobile Element Selector

모바일 요소 선택기

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

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