☰

MES(Mobile Element Selector)

Material M3의 진보한 디자인, 아름다운 애니메이션, 완벽한 기능을 가진 모바일 요소 선택기

  1. // ==UserScript==
  2. // @name         MES(Mobile Element Selector)
  3. // @author       삼플
  4. // @version      1.2.8
  5. // @description  Material M3의 진보한 디자인, 아름다운 애니메이션, 완벽한 기능을 가진 모바일 요소 선택기
  6. // @match        *://*/*
  7. // @license      MIT
  8. // @grant        GM_setClipboard
  9. // @grant        GM_setValue
  10. // @grant        GM_getValue
  11. // @namespace https://adguard.com
  12. // ==/UserScript==
  13.  
  14. (async function() {
  15. 	'use strict';
  16. 	const SCRIPT_ID = "[MES v1.2.8 M3]";
  17. 	const ADGUARD_LOGO_URL = 'https://upload.wikimedia.org/wikipedia/commons/thumb/4/4c/AdGuard.svg/500px-AdGuard.svg.png';
  18.  
  19. 	const STRINGS = {
  20. 		panelTitle: '요소 차단',
  21. 		settingsTitle: 'MES by 삼플',
  22. 		listTitle: '저장된 차단 규칙',
  23. 		selectedElementLabel: '선택된 요소 (CSS 선택자)',
  24. 		parentLevelLabel: '상위 요소 선택 레벨:',
  25. 		copy: '복사',
  26. 		preview: '미리보기',
  27. 		restorePreview: '되돌리기',
  28. 		saveRule: '규칙 저장',
  29. 		list: '목록',
  30. 		settings: '설정',
  31. 		cancel: '취소',
  32. 		close: '닫기',
  33. 		includeSiteNameLabel: '규칙에 사이트명 포함',
  34. 		useAdguardLogoLabel: '토글 버튼 AdGuard 로고',
  35. 		panelOpacityLabel: '패널 투명도',
  36. 		toggleSizeLabel: '토글 버튼 크기',
  37. 		toggleOpacityLabel: '토글 버튼 투명도',
  38. 		tempDisableLabel: '모든 규칙 임시 비활성화',
  39. 		backupLabel: '규칙 백업 (JSON)',
  40. 		restoreLabel: '규칙 복원 (JSON)',
  41. 		togglePositionLabel: '토글 버튼 위치',
  42. 		posTopLeft: '좌상',
  43. 		posTopRight: '우상',
  44. 		posBottomLeft: '좌하',
  45. 		posBottomRight: '우하',
  46. 		on: 'ON',
  47. 		off: 'OFF',
  48. 		noRules: '저장된 규칙이 없습니다.',
  49. 		noElementSelected: '⚠️ 선택된 요소가 없습니다.',
  50. 		cannotGenerateSelector: '❌ 유효한 선택자를 생성할 수 없습니다.',
  51. 		selectorCopied: '✅ 선택자가 복사되었습니다!',
  52. 		clipboardError: '❌ 클립보드 복사 실패',
  53. 		promptCopy: '선택자를 직접 복사하세요:',
  54. 		alreadyHidden: 'ℹ️ 이미 숨겨진 요소입니다.',
  55. 		previewDifferentElement: '⚠️ 다른 요소가 미리보기 중입니다.',
  56. 		ruleSavedReloading: '✅ 규칙 저장됨! 적용 중...',
  57. 		ruleSavedApplyFailed: '⚠️ 규칙은 저장했으나 즉시 적용 실패.',
  58. 		ruleAddError: '❌ 규칙 추가 중 오류:',
  59. 		ruleExists: 'ℹ️ 이미 저장된 규칙입니다.',
  60. 		listShowError: '❌ 목록 표시 중 오류 발생',
  61. 		ruleCopied: '✅ 규칙 복사됨',
  62. 		ruleDeleted: '🗑️ 규칙 삭제됨',
  63. 		ruleDeleteError: '❌ 규칙 삭제 실패',
  64. 		settingsSaved: '✅ 설정 저장됨',
  65. 		settingsSaveError: '❌ 설정 저장 실패',
  66. 		backupStarting: '💾 규칙 백업 파일 다운로드를 시작합니다.',
  67. 		backupError: '❌ 규칙 백업 실패',
  68. 		restorePrompt: '📁 복원할 JSON 파일을 선택하세요.',
  69. 		restoreSuccess: '✅ 규칙 복원 완료! 적용 중...',
  70. 		restoreErrorInvalidFile: '❌ 잘못된 파일 형식 또는 내용입니다.',
  71. 		restoreErrorGeneral: '❌ 규칙 복원 실패',
  72. 		blockingApplied: (count) => `✅ ${count}개의 규칙 적용됨`,
  73. 		blockingApplyError: '❌ 규칙 적용 중 오류 발생',
  74. 		tempBlockingOn: '🚫 모든 규칙 임시 비활성화됨',
  75. 		tempBlockingOff: '✅ 규칙 다시 활성화됨'
  76. 	};
  77.  
  78. 	const DEFAULT_SETTINGS = {
  79. 		includeSiteName: true,
  80. 		panelOpacity: 0.65,
  81. 		toggleSizeScale: 1.0,
  82. 		toggleOpacity: 1.0,
  83. 		showAdguardLogo: false,
  84. 		tempBlockingDisabled: false,
  85. 		toggleBtnCorner: 'bottom-right'
  86. 	};
  87.  
  88. 	let settings = {};
  89. 	const SETTINGS_KEY = 'mobileElementSelectorSettings_v1_2';
  90. 	const BLOCKED_SELECTORS_KEY = 'mobileBlockedSelectors_v2';
  91.  
  92. 	async function loadSettings() {
  93. 		let storedSettings = {};
  94. 		try {
  95. 			const storedValue = await GM_getValue(SETTINGS_KEY, JSON.stringify(DEFAULT_SETTINGS));
  96. 			storedSettings = JSON.parse(storedValue || '{}');
  97. 		} catch (e) {
  98. 			console.error(SCRIPT_ID, `Error loading settings from GM_getValue('${SETTINGS_KEY}'), using defaults.`, e);
  99. 			storedSettings = {
  100. 				...DEFAULT_SETTINGS
  101. 			};
  102. 		}
  103.  
  104. 		settings = {
  105. 			...DEFAULT_SETTINGS,
  106. 			...storedSettings
  107. 		};
  108.  
  109. 		settings.panelOpacity = parseFloat(settings.panelOpacity);
  110. 		if (isNaN(settings.panelOpacity) || settings.panelOpacity < 0.1 || settings.panelOpacity > 1.0) {
  111. 			settings.panelOpacity = DEFAULT_SETTINGS.panelOpacity;
  112. 		}
  113. 		settings.toggleSizeScale = parseFloat(settings.toggleSizeScale);
  114. 		if (isNaN(settings.toggleSizeScale) || settings.toggleSizeScale < 0.5 || settings.toggleSizeScale > 2.0) {
  115. 			settings.toggleSizeScale = DEFAULT_SETTINGS.toggleSizeScale;
  116. 		}
  117. 		settings.toggleOpacity = parseFloat(settings.toggleOpacity);
  118. 		if (isNaN(settings.toggleOpacity) || settings.toggleOpacity < 0.1 || settings.toggleOpacity > 1.0) {
  119. 			settings.toggleOpacity = DEFAULT_SETTINGS.toggleOpacity;
  120. 		}
  121. 		settings.includeSiteName = typeof settings.includeSiteName === 'boolean' ? settings.includeSiteName : DEFAULT_SETTINGS.includeSiteName;
  122. 		settings.showAdguardLogo = typeof settings.showAdguardLogo === 'boolean' ? settings.showAdguardLogo : DEFAULT_SETTINGS.showAdguardLogo;
  123. 		settings.tempBlockingDisabled = typeof settings.tempBlockingDisabled === 'boolean' ? settings.tempBlockingDisabled : DEFAULT_SETTINGS.tempBlockingDisabled;
  124.  
  125. 		const validCorners = ['top-left', 'top-right', 'bottom-left', 'bottom-right'];
  126. 		if (!validCorners.includes(settings.toggleBtnCorner)) {
  127. 			settings.toggleBtnCorner = DEFAULT_SETTINGS.toggleBtnCorner;
  128. 		}
  129.  
  130. 		console.log(SCRIPT_ID, "Settings loaded:", settings);
  131. 	}
  132.  
  133. 	async function saveSettings() {
  134. 		try {
  135. 			await GM_setValue(SETTINGS_KEY, JSON.stringify(settings));
  136. 			console.log(SCRIPT_ID, "Settings saved:", settings);
  137. 		} catch (e) {
  138. 			console.error(SCRIPT_ID, `Error saving settings to GM_setValue('${SETTINGS_KEY}')`, e);
  139. 			showToast(STRINGS.settingsSaveError, 'error');
  140. 		}
  141. 	}
  142.  
  143. 	const style = document.createElement('style');
  144.  
  145. 	function updateCSSVariables() {
  146. 		document.documentElement.style.setProperty('--panel-opacity', settings.panelOpacity);
  147. 		document.documentElement.style.setProperty('--toggle-size', `${56 * settings.toggleSizeScale}px`);
  148. 		document.documentElement.style.setProperty('--toggle-opacity', settings.toggleOpacity);
  149.  
  150. 		document.querySelectorAll('#mobile-block-panel, #mobile-settings-panel, #mobile-blocklist-panel').forEach(p => {
  151. 			p.style.setProperty('background-color', `rgba(40, 43, 48, ${settings.panelOpacity})`, 'important');
  152. 		});
  153. 		if (toggleBtn) {
  154. 			toggleBtn.style.setProperty('width', `var(--toggle-size)`, 'important');
  155. 			toggleBtn.style.setProperty('height', `var(--toggle-size)`, 'important');
  156. 			toggleBtn.style.setProperty('opacity', `var(--toggle-opacity)`, 'important');
  157. 		}
  158. 	}
  159.  
  160. 	function applyToggleBtnPosition() {
  161. 		if (!toggleBtn) return;
  162.  
  163. 		toggleBtn.style.top = 'auto';
  164. 		toggleBtn.style.left = 'auto';
  165. 		toggleBtn.style.bottom = 'auto';
  166. 		toggleBtn.style.right = 'auto';
  167. 		toggleBtn.style.transform = '';
  168.  
  169. 		const margin = '20px';
  170.  
  171. 		switch (settings.toggleBtnCorner) {
  172. 			case 'top-left':
  173. 				toggleBtn.style.top = margin;
  174. 				toggleBtn.style.left = margin;
  175. 				break;
  176. 			case 'top-right':
  177. 				toggleBtn.style.top = margin;
  178. 				toggleBtn.style.right = margin;
  179. 				break;
  180. 			case 'bottom-left':
  181. 				toggleBtn.style.bottom = margin;
  182. 				toggleBtn.style.left = margin;
  183. 				break;
  184. 			case 'bottom-right':
  185. 			default:
  186. 				toggleBtn.style.bottom = margin;
  187. 				toggleBtn.style.right = margin;
  188. 				break;
  189. 		}
  190. 		console.log(SCRIPT_ID, "Applied toggle button corner:", settings.toggleBtnCorner);
  191. 	}
  192.  
  193. 	style.textContent = `
  194. :root {
  195.     --md-sys-color-primary: #a0c9ff; --md-sys-color-on-primary: #00325a;
  196.     --md-sys-color-primary-container: #004880; --md-sys-color-on-primary-container: #d1e4ff;
  197.     --md-sys-color-secondary: #bdc7dc; --md-sys-color-on-secondary: #283141;
  198.     --md-sys-color-secondary-container: #3e4758; --md-sys-color-on-secondary-container: #dae2f9;
  199.     --md-sys-color-tertiary: #e0bddd; --md-sys-color-on-tertiary: #402843;
  200.     --md-sys-color-tertiary-container: #583e5a; --md-sys-color-on-tertiary-container: #fdd9fa;
  201.     --md-sys-color-error: #ffb4ab; --md-sys-color-on-error: #690005;
  202.     --md-sys-color-error-container: #93000a; --md-sys-color-on-error-container: #ffdad6;
  203.     --md-sys-color-background: #1a1c1e; --md-sys-color-on-background: #e3e2e6;
  204.     --md-sys-color-surface: #1a1c1e; --md-sys-color-on-surface: #e3e2e6;
  205.     --md-sys-color-surface-variant: #43474e; --md-sys-color-on-surface-variant: #c3c6cf;
  206.     --md-sys-color-outline: #8d9199; --md-sys-color-shadow: #000000;
  207.     --md-sys-color-inverse-surface: #e3e2e6; --md-sys-color-inverse-on-surface: #2f3033;
  208.     --md-sys-color-surface-container-high: rgba(227, 226, 230, 0.16);
  209.     --md-sys-color-success: #90ee90; --md-sys-color-success-container: rgba(144, 238, 144, 0.1);
  210.     --md-sys-color-warning: #ffcc80;
  211.     --panel-opacity: ${DEFAULT_SETTINGS.panelOpacity};
  212.     --toggle-size: ${56 * DEFAULT_SETTINGS.toggleSizeScale}px;
  213.     --toggle-opacity: ${DEFAULT_SETTINGS.toggleOpacity};
  214.     --md-ref-typeface-plain: 'Roboto', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  215.     --md-sys-typescale-body-large-font-family: var(--md-ref-typeface-plain);
  216.     --md-sys-typescale-body-large-font-size: 16px;
  217.     --md-sys-typescale-label-large-font-size: 14px;
  218.     --md-sys-typescale-label-medium-font-size: 12px;
  219.     --md-sys-typescale-label-small-font-size: 11px;
  220.     --md-sys-typescale-title-medium-font-size: 18px;
  221. }
  222.  
  223. .scrollable-container {
  224.     position: relative;
  225.     overflow-y: auto;
  226.     max-height: 70vh;
  227.     padding: 20px;
  228.     -webkit-mask-image: linear-gradient(to bottom, transparent 0%, black 20%, black 80%, transparent 100%);
  229.     mask-image: linear-gradient(to bottom, transparent 0%, black 20%, black 80%, transparent 100%);
  230.     
  231.     scrollbar-width: none;
  232.     -ms-overflow-style: none;
  233. }
  234. .scrollable-container::-webkit-scrollbar {
  235.     display: none;
  236. }
  237.  
  238. .mobile-block-ui { z-index: 2147483646 !important; touch-action: manipulation !important; font-family: var(--md-sys-typescale-body-large-font-family); box-sizing: border-box; position: fixed !important; visibility: visible !important; color: var(--md-sys-color-on-surface); -webkit-tap-highlight-color: transparent !important; }
  239.  
  240. #mobile-block-panel, #mobile-settings-panel, #mobile-blocklist-panel {
  241.     background-color: rgba(40, 43, 48, var(--panel-opacity)) !important; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  242.     color: var(--md-sys-color-on-surface); border-radius: 20px !important;
  243.     box-shadow: 0 12px 17px 2px rgba(0,0,0,0.14), 0 5px 22px 4px rgba(0,0,0,0.12), 0 7px 8px -4px rgba(0,0,0,0.20) !important;
  244.     border: 1px solid rgba(255, 255, 255, 0.12); padding: 18px 20px; width: calc(100% - 40px); max-width: 380px;
  245.     display: none;
  246.     opacity: 0;
  247.     backface-visibility: hidden; -webkit-backface-visibility: hidden; overflow: hidden;
  248.     transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.3s ease-out;
  249.     will-change: transform, opacity;
  250.     cursor: grab;
  251. }
  252.  
  253. #mobile-block-panel { bottom: 20px; left: 50%; transform: translateX(-50%) translateY(100px) scale(0.95); z-index: 2147483645 !important; }
  254. #mobile-settings-panel, #mobile-blocklist-panel { top: 50%; left: 50%; transform: translate(-50%, -50%) scale(0.9); z-index: 2147483647 !important; max-width: 340px; max-height: 90vh;overflow-y: auto;}
  255.  
  256. #mobile-block-panel.visible {
  257.     opacity: 1;
  258.     transform: translateX(-50%) translateY(0) scale(1);
  259. }
  260. #mobile-settings-panel.visible, #mobile-blocklist-panel.visible {
  261.     opacity: 1;
  262.     transform: translate(-50%, -50%) scale(1);
  263. }
  264.  
  265. /* Overrides for dragged panels: transform should only handle scale */
  266. #mobile-block-panel[data-was-dragged="true"] {
  267.     transform: scale(0.95); /* Closed state */
  268. }
  269. #mobile-block-panel[data-was-dragged="true"].visible {
  270.     transform: scale(1); /* Open state */
  271. }
  272. #mobile-settings-panel[data-was-dragged="true"],
  273. #mobile-blocklist-panel[data-was-dragged="true"] {
  274.     transform: scale(0.9); /* Closed state */
  275. }
  276. #mobile-settings-panel[data-was-dragged="true"].visible,
  277. #mobile-blocklist-panel[data-was-dragged="true"].visible {
  278.     transform: scale(1); /* Open state */
  279. }
  280.  
  281. .mb-panel-title { font-size: var(--md-sys-typescale-title-medium-font-size); font-weight: 500; color: var(--md-sys-color-on-surface); text-align: center; margin: 0 0 24px 0; }
  282.  
  283. .mb-slider { width: 100%; margin: 15px 0; -webkit-appearance: none; appearance: none; background: var(--md-sys-color-surface-variant); height: 5px; border-radius: 3px; outline: none; cursor: pointer; transition: background 0.3s ease; }
  284. .mb-slider:hover { background: var(--md-sys-color-outline); }
  285. .mb-slider::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 22px; height: 22px; background: var(--md-sys-color-primary); border-radius: 50%; cursor: pointer; border: none; box-shadow: 0 1px 3px rgba(0,0,0,0.4); transition: background 0.3s ease, box-shadow 0.3s ease; }
  286. .mb-slider::-moz-range-thumb { width: 22px; height: 22px; background: var(--md-sys-color-primary); border-radius: 50%; cursor: pointer; border: none; box-shadow: 0 1px 3px rgba(0,0,0,0.4); transition: background 0.3s ease, box-shadow 0.3s ease; }
  287. .mb-slider:active::-webkit-slider-thumb { box-shadow: 0 0 0 10px rgba(var(--md-sys-color-primary-rgb, 160, 201, 255), 0.25); }
  288. .mb-slider:active::-moz-range-thumb { box-shadow: 0 0 0 10px rgba(var(--md-sys-color-primary-rgb, 160, 201, 255), 0.25); }
  289.  
  290. .selected-element {
  291.     outline: 3px solid var(--md-sys-color-error) !important;
  292.     outline-offset: 2px;
  293.     box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0.45) !important;
  294.     background-color: rgba(255, 82, 82, 0.15) !important;
  295.     z-index: 2147483644 !important;
  296.     transition: background-color 0.1s ease, outline 0.1s ease, box-shadow 0.1s ease;
  297.     pointer-events: none;
  298. }
  299.  
  300. #mobile-block-toggleBtn {
  301.     z-index: 2147483646 !important; background-color: var(--md-sys-color-primary-container) !important; color: var(--md-sys-color-on-primary-container) !important;
  302.     opacity: var(--toggle-opacity) !important; width: var(--toggle-size) !important; height: var(--toggle-size) !important; border-radius: 18px !important; border: none !important; cursor: pointer !important;
  303.     box-shadow: 0 6px 10px 0 rgba(0,0,0,0.14), 0 1px 18px 0 rgba(0,0,0,0.12), 0 3px 5px -1px rgba(0,0,0,0.20) !important;
  304.     transition: background-color 0.3s ease, transform 0.2s ease, box-shadow 0.2s ease, opacity 0.3s ease, border 0.2s ease, top 0.3s ease, left 0.3s ease, bottom 0.3s ease, right 0.3s ease;
  305.     display: flex !important; align-items: center !important; justify-content: center !important; overflow: hidden !important; backface-visibility: hidden; -webkit-backface-visibility: hidden; position: fixed !important; -webkit-tap-highlight-color: transparent !important;
  306. }
  307. #mobile-block-toggleBtn:active { transform: scale(0.95); box-shadow: 0 2px 4px -1px rgba(0,0,0,0.2), 0 4px 5px 0 rgba(0,0,0,0.14), 0 1px 10px 0 rgba(0,0,0,0.12) !important; }
  308. #mobile-block-toggleBtn.selecting {
  309.     background-color: var(--md-sys-color-primary) !important;
  310.     color: var(--md-sys-color-on-primary) !important;
  311.     box-shadow: 0 8px 10px 1px rgba(0,0,0,0.14), 0 3px 14px 2px rgba(0,0,0,0.12), 0 5px 5px -3px rgba(0,0,0,0.20) !important;
  312. }
  313. #mobile-block-toggleBtn .toggle-icon { width: 55%; height: 55%; display: block; margin: auto; background-color: currentColor; mask-size: contain; mask-repeat: no-repeat; mask-position: center; -webkit-mask-size: contain; -webkit-mask-repeat: no-repeat; -webkit-mask-position: center; }
  314. #mobile-block-toggleBtn .toggle-icon-plus { mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="currentColor"><path d="M0 0h24v24H0z" fill="none"/><path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z"/></svg>'); -webkit-mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="currentColor"><path d="M0 0h24v24H0z" fill="none"/><path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z"/></svg>'); }
  315. #mobile-block-toggleBtn.selecting .toggle-icon-plus { mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="currentColor"><path d="M0 0h24v24H0z" fill="none"/><path d="M3 17.25V21h3.75L17.81 9.94l-3.75-3.75L3 17.25zM20.71 7.04c.39-.39.39-1.02 0-1.41l-2.34-2.34c-.39-.39-1.02-.39-1.41 0l-1.83 1.83 3.75 3.75 1.83-1.83z"/></svg>'); -webkit-mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="currentColor"><path d="M0 0h24v24H0z" fill="none"/><path d="M3 17.25V21h3.75L17.81 9.94l-3.75-3.75L3 17.25zM20.71 7.04c.39-.39.39-1.02 0-1.41l-2.34-2.34c-.39-.39-1.02-.39-1.41 0l-1.83 1.83 3.75 3.75 1.83-1.83z"/></svg>'); }
  316. #mobile-block-toggleBtn .toggle-icon-adguard { background-image: url('${ADGUARD_LOGO_URL}'); background-size: contain; background-repeat: no-repeat; background-position: center; background-color: transparent !important; mask-image: none; -webkit-mask-image: none; width: 60%; height: 60%; }
  317.  
  318. .mb-btn { padding: 10px 24px; border: none; border-radius: 20px !important; font-size: var(--md-sys-typescale-label-large-font-size); font-weight: 500; cursor: pointer; transition: background-color 0.2s ease, transform 0.1s ease, box-shadow 0.2s ease; text-align: center; box-shadow: 0 1px 2px 0 rgba(0,0,0,0.3), 0 1px 3px 1px rgba(0,0,0,0.15); min-width: 64px; min-height: 40px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; opacity: 1 !important; -webkit-tap-highlight-color: transparent !important; line-height: 1.5; display: inline-flex; align-items: center; justify-content: center; }
  319. .mb-btn:hover { box-shadow: 0 1px 2px 0 rgba(0,0,0,0.3), 0 2px 6px 2px rgba(0,0,0,0.15); }
  320. .mb-btn:active { transform: scale(0.97); box-shadow: none; }
  321. .mb-btn.primary { background-color: var(--md-sys-color-primary); color: var(--md-sys-color-on-primary); }
  322. .mb-btn.primary:hover { background-color: #b0d3ff; } .mb-btn.primary:active { background-color: #c0daff; }
  323. .mb-btn.secondary { background-color: var(--md-sys-color-secondary-container); color: var(--md-sys-color-on-secondary-container); }
  324. .mb-btn.secondary:hover { background-color: #545d6e; } .mb-btn.secondary:active { background-color: #6a7385; }
  325. .mb-btn.tertiary { background-color: var(--md-sys-color-tertiary-container); color: var(--md-sys-color-on-tertiary-container); }
  326. .mb-btn.tertiary:hover { background-color: #6f5471; } .mb-btn.tertiary:active { background-color: #866a89; }
  327. .mb-btn.error { background-color: var(--md-sys-color-error-container); color: var(--md-sys-color-on-error-container); }
  328. .mb-btn.error:hover { background-color: #b12025; } .mb-btn.error:active { background-color: #c83c40; }
  329. .mb-btn.surface { background-color: var(--md-sys-color-surface-variant); color: var(--md-sys-color-on-surface-variant); }
  330. .mb-btn.surface:hover { background-color: #53575e; } .mb-btn.surface:active { background-color: #63676e; }
  331. .mb-btn.outline { background-color: transparent; color: var(--md-sys-color-primary); border: 1px solid var(--md-sys-color-outline); box-shadow: none; }
  332. .mb-btn.outline:hover { background-color: rgba(var(--md-sys-color-primary-rgb, 160, 201, 255), 0.08); }
  333. .mb-btn.outline:active { background-color: rgba(var(--md-sys-color-primary-rgb, 160, 201, 255), 0.12); }
  334.  
  335. .button-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(90px, 1fr)); gap: 12px; margin-top: 24px; }
  336. #blocker-info-wrapper { margin-bottom: 15px; padding: 10px 14px; background-color: var(--md-sys-color-surface-variant); border-radius: 12px; border: 1px solid var(--md-sys-color-outline); }
  337. #blocker-info-label { display: block; font-size: var(--md-sys-typescale-label-medium-font-size); color: var(--md-sys-color-on-surface-variant); margin-bottom: 6px; font-weight: 500; }
  338. #blocker-info { display: block; color: var(--md-sys-color-on-surface); font-size: var(--md-sys-typescale-label-large-font-size); line-height: 1.45; word-break: break-all; min-height: 1.45em; font-family: 'Consolas', 'Monaco', monospace; max-height: 6em; overflow-y: auto; }
  339. #blocker-info:empty::after { content: '없음'; color: var(--md-sys-color-on-surface-variant); font-style: italic; }
  340. label[for="blocker-slider"] { display: block; font-size: var(--md-sys-typescale-label-medium-font-size); color: var(--md-sys-color-on-surface-variant); margin-bottom: 5px; margin-top: 10px; }
  341.  
  342. .settings-item { margin-bottom: 20px; display: flex; flex-direction: column; gap: 10px; }
  343. .settings-item label { display: flex; justify-content: space-between; align-items: center; font-size: var(--md-sys-typescale-label-large-font-size); color: var(--md-sys-color-on-surface-variant); }
  344. .settings-item label .settings-label-text { flex-grow: 1; margin-right: 10px; }
  345. .settings-value { color: var(--md-sys-color-on-surface); font-weight: 500; font-size: var(--md-sys-typescale-label-medium-font-size); padding-left: 10px; }
  346. #settings-toggle-site, #settings-adguard-logo, #settings-temp-disable { min-width: 70px; padding: 8px 14px; font-size: var(--md-sys-typescale-label-medium-font-size); flex-shrink: 0; }
  347. #settings-toggle-site.active, #settings-adguard-logo.active, #settings-temp-disable.active { background-color: var(--md-sys-color-primary); color: var(--md-sys-color-on-primary); }
  348. #settings-toggle-site:not(.active), #settings-adguard-logo:not(.active), #settings-temp-disable:not(.active) { background-color: var(--md-sys-color-secondary-container); color: var(--md-sys-color-on-secondary-container); }
  349. #settings-close, #settings-backup, #settings-restore { width: 100%; margin-top: 10px; }
  350. #settings-restore-input { display: none; }
  351.  
  352. .corner-selector-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; margin-top: 5px; }
  353. .corner-btn { padding: 8px 12px; min-width: 60px; font-size: var(--md-sys-typescale-label-medium-font-size); }
  354. .corner-btn.active { background-color: var(--md-sys-color-primary); color: var(--md-sys-color-on-primary); }
  355. .corner-btn:not(.active) { background-color: var(--md-sys-color-secondary-container); color: var(--md-sys-color-on-secondary-container); }
  356.  
  357. #blocklist-container { max-height: calc(70vh - 150px); overflow-y: auto; margin: 20px 0; padding-right: 8px; display: flex; flex-direction: column; gap: 10px; }
  358. .blocklist-item { display: flex; justify-content: space-between; align-items: center; padding: 12px 14px; background-color: rgba(var(--md-sys-color-surface-variant-rgb, 67, 71, 78), 0.5); border-radius: 12px; border: 1px solid transparent; transition: background-color 0.2s, border-color 0.2s, opacity 0.3s ease, transform 0.3s ease; }
  359. .blocklist-item:hover { background-color: rgba(var(--md-sys-color-surface-variant-rgb, 67, 71, 78), 0.7); border-color: var(--md-sys-color-outline); }
  360. .blocklist-item span { flex: 1; word-break: break-all; margin-right: 12px; font-size: var(--md-sys-typescale-label-medium-font-size); color: var(--md-sys-color-on-surface-variant); font-family: 'Consolas', 'Monaco', monospace; }
  361. .blocklist-controls { display: flex; gap: 6px; flex-shrink: 0; }
  362. .blocklist-btn { padding: 6px 10px; min-width: auto; min-height: 32px; font-size: var(--md-sys-typescale-label-small-font-size); border-radius: 16px !important; }
  363. .blocklist-btn-delete { background-color: var(--md-sys-color-error-container); color: var(--md-sys-color-on-error-container); }
  364. .blocklist-btn-copy { background-color: var(--md-sys-color-secondary-container); color: var(--md-sys-color-on-secondary-container); }
  365. #blocklist-empty { text-align:center; color: var(--md-sys-color-on-surface-variant); padding: 20px 0; }
  366.  
  367. #mes-toast-container { position: fixed; bottom: 90px; left: 50%; transform: translateX(-50%); z-index: 2147483647 !important; display: flex; flex-direction: column-reverse; align-items: center; gap: 10px; pointer-events: none; width: max-content; max-width: 90%; }
  368. .mes-toast { background-color: var(--md-sys-color-inverse-surface); color: var(--md-sys-color-inverse-on-surface); padding: 14px 20px; border-radius: 8px; box-shadow: 0 3px 5px -1px rgba(0,0,0,0.2), 0 6px 10px 0 rgba(0,0,0,0.14), 0 1px 18px 0 rgba(0,0,0,0.12); font-size: var(--md-sys-typescale-label-large-font-size); opacity: 0; transform: translateY(20px); transition: opacity 0.3s ease, transform 0.3s ease, background-color 0.3s ease; pointer-events: all; max-width: 100%; text-align: center; }
  369. .mes-toast.show { opacity: 1; transform: translateY(0); }
  370. .mes-toast.info { background-color: #333; color: white; }
  371. .mes-toast.success { background-color: var(--md-sys-color-success-container); color: var(--md-sys-color-success); }
  372. .mes-toast.error { background-color: var(--md-sys-color-error-container); color: var(--md-sys-color-on-error-container); }
  373. .mes-toast.warning { background-color: #4d3a00; color: var(--md-sys-color-warning); }
  374.     `;
  375. 	document.head.appendChild(style);
  376.  
  377. 	let panel, settingsPanel, toggleBtn, listPanel, toastContainer;
  378.  
  379. 	function createUIElements() {
  380. 		toastContainer = document.createElement('div');
  381. 		toastContainer.id = 'mes-toast-container';
  382. 		toastContainer.className = 'mobile-block-ui';
  383. 		document.body.appendChild(toastContainer);
  384.  
  385. 		panel = document.createElement('div');
  386. 		panel.id = 'mobile-block-panel';
  387. 		panel.className = 'mobile-block-ui';
  388. 		panel.innerHTML = `
  389.             <div id="blocker-info-wrapper">
  390.                 <span id="blocker-info-label">${STRINGS.selectedElementLabel}</span>
  391.                 <div id="blocker-info"></div>
  392.             </div>
  393.             <label for="blocker-slider" style="display: block; font-size: var(--md-sys-typescale-label-medium-font-size); color: var(--md-sys-color-on-surface-variant); margin-bottom: 5px;">${STRINGS.parentLevelLabel}</label>
  394.             <input type="range" id="blocker-slider" class="mb-slider" min="0" max="10" value="0" aria-label="Parent Level Selector">
  395.             <div class="button-grid">
  396.                 <button id="blocker-copy" class="mb-btn secondary">${STRINGS.copy}</button>
  397.                 <button id="blocker-preview" class="mb-btn secondary">${STRINGS.preview}</button>
  398.                 <button id="blocker-add-block" class="mb-btn primary">${STRINGS.saveRule}</button>
  399.                 <button id="blocker-list" class="mb-btn tertiary">${STRINGS.list}</button>
  400.                 <button id="blocker-settings" class="mb-btn tertiary">${STRINGS.settings}</button>
  401.                 <button id="blocker-cancel" class="mb-btn surface">${STRINGS.cancel}</button>
  402.             </div>`;
  403. 		document.body.appendChild(panel);
  404.  
  405. 		listPanel = document.createElement('div');
  406. 		listPanel.id = 'mobile-blocklist-panel';
  407. 		listPanel.className = 'mobile-block-ui';
  408. 		listPanel.innerHTML = `
  409.             <h3 class="mb-panel-title">${STRINGS.listTitle}</h3>
  410.             <div id="blocklist-container"></div>
  411.             <button id="blocklist-close" class="mb-btn surface" style="width: 100%; margin-top: 15px;">${STRINGS.close}</button>`;
  412. 		document.body.appendChild(listPanel);
  413.  
  414. 		settingsPanel = document.createElement('div');
  415. 		settingsPanel.id = 'mobile-settings-panel';
  416. 		settingsPanel.className = 'mobile-block-ui';
  417. 		settingsPanel.innerHTML = `
  418.             <h3 class="mb-panel-title">${STRINGS.settingsTitle}</h3>
  419.             <div class="scrollable-container" style="max-height: 65vh; overflow-y: auto;">
  420.             <div class="settings-item">
  421.                 <label><span class="settings-label-text">${STRINGS.includeSiteNameLabel}</span>
  422.                     <button id="settings-toggle-site" class="mb-btn ${settings.includeSiteName ? 'active' : ''}">${settings.includeSiteName ? STRINGS.on : STRINGS.off}</button>
  423.                 </label>
  424.             </div>
  425.             <div class="settings-item">
  426.                 <label><span class="settings-label-text">${STRINGS.useAdguardLogoLabel}</span>
  427.                     <button id="settings-adguard-logo" class="mb-btn ${settings.showAdguardLogo ? 'active' : ''}">${settings.showAdguardLogo ? STRINGS.on : STRINGS.off}</button>
  428.                 </label>
  429.             </div>
  430.              <div class="settings-item">
  431.                 <label><span class="settings-label-text">${STRINGS.tempDisableLabel}</span>
  432.                     <button id="settings-temp-disable" class="mb-btn ${settings.tempBlockingDisabled ? 'active error' : 'secondary'}">${settings.tempBlockingDisabled ? STRINGS.on : STRINGS.off}</button>
  433.                 </label>
  434.             </div>
  435.             <div class="settings-item">
  436.                 <label for="settings-panel-opacity">
  437.                     <span class="settings-label-text">${STRINGS.panelOpacityLabel}</span>
  438.                     <span id="opacity-value" class="settings-value">${settings.panelOpacity.toFixed(2)}</span>
  439.                 </label>
  440.                 <input id="settings-panel-opacity" type="range" class="mb-slider" min="0.1" max="1.0" step="0.05" value="${settings.panelOpacity}" aria-label="Panel Opacity">
  441.             </div>
  442.             <div class="settings-item">
  443.                 <label for="settings-toggle-size">
  444.                     <span class="settings-label-text">${STRINGS.toggleSizeLabel}</span>
  445.                     <span id="toggle-size-value" class="settings-value">${settings.toggleSizeScale.toFixed(1)}x</span>
  446.                 </label>
  447.                 <input id="settings-toggle-size" type="range" class="mb-slider" min="0.5" max="2.0" step="0.1" value="${settings.toggleSizeScale}" aria-label="Toggle Button Size">
  448.             </div>
  449.             <div class="settings-item">
  450.                 <label for="settings-toggle-opacity">
  451.                     <span class="settings-label-text">${STRINGS.toggleOpacityLabel}</span>
  452.                     <span id="toggle-opacity-value" class="settings-value">${settings.toggleOpacity.toFixed(2)}</span>
  453.                 </label>
  454.                 <input id="settings-toggle-opacity" type="range" class="mb-slider" min="0.1" max="1.0" step="0.05" value="${settings.toggleOpacity}" aria-label="Toggle Button Opacity">
  455.             </div>
  456.             <div class="settings-item">
  457.                  <label><span class="settings-label-text">${STRINGS.togglePositionLabel}</span></label>
  458.                  <div class="corner-selector-grid">
  459.                      <button id="corner-tl" data-corner="top-left" class="mb-btn corner-btn">${STRINGS.posTopLeft}</button>
  460.                      <button id="corner-tr" data-corner="top-right" class="mb-btn corner-btn">${STRINGS.posTopRight}</button>
  461.                      <button id="corner-bl" data-corner="bottom-left" class="mb-btn corner-btn">${STRINGS.posBottomLeft}</button>
  462.                      <button id="corner-br" data-corner="bottom-right" class="mb-btn corner-btn">${STRINGS.posBottomRight}</button>
  463.                  </div>
  464.             </div>
  465.             <div class="button-grid" style="margin-top: 20px; grid-template-columns: 1fr 1fr;">
  466.                  <button id="settings-backup" class="mb-btn outline">${STRINGS.backupLabel}</button>
  467.                  <button id="settings-restore" class="mb-btn outline">${STRINGS.restoreLabel}</button>
  468.                  <input type="file" id="settings-restore-input" accept=".json">
  469.             </div>
  470.             </div>
  471.             <button id="settings-close" class="mb-btn surface" style="width: 100%; margin-top: 20px;">${STRINGS.close}</button>`;
  472. 		document.body.appendChild(settingsPanel);
  473.  
  474. 		toggleBtn = document.createElement('button');
  475. 		toggleBtn.id = 'mobile-block-toggleBtn';
  476. 		toggleBtn.className = 'mobile-block-ui';
  477. 		toggleBtn.setAttribute('aria-label', 'Toggle Element Selector');
  478. 		document.body.appendChild(toggleBtn);
  479.  
  480. 		updateCSSVariables();
  481. 		updateToggleIcon();
  482. 		applyToggleBtnPosition();
  483.  
  484. 		initRefsAndEvents();
  485. 		applyBlocking();
  486. 	}
  487.  
  488. 	function showToast(message, type = 'info', duration = 3000) {
  489. 		if (!toastContainer) {
  490. 			console.warn(SCRIPT_ID, "Toast container not ready for message:", message);
  491. 			return;
  492. 		}
  493. 		const toast = document.createElement('div');
  494. 		toast.className = `mes-toast ${type}`;
  495. 		toast.textContent = message;
  496. 		toastContainer.appendChild(toast);
  497.  
  498. 		void toast.offsetWidth;
  499.  
  500. 		requestAnimationFrame(() => {
  501. 			toast.classList.add('show');
  502. 		});
  503.  
  504. 		setTimeout(() => {
  505. 			toast.classList.remove('show');
  506. 			toast.addEventListener('transitionend', () => {
  507. 				try {
  508. 					toast.remove();
  509. 				} catch (e) {}
  510. 			}, {
  511. 				once: true
  512. 			});
  513. 			setTimeout(() => {
  514. 				try {
  515. 					toast.remove();
  516. 				} catch (e) {}
  517. 			}, 500);
  518. 		}, duration);
  519. 	}
  520.  
  521. 	let selecting = false;
  522. 	let selectedEl = null;
  523. 	let initialTouchedElement = null;
  524. 	let touchStartX = 0,
  525. 		touchStartY = 0,
  526. 		touchMoved = false;
  527. 	const moveThreshold = 15;
  528. 	let blockedSelectorsCache = [];
  529.  
  530. 	async function loadBlockedSelectors() {
  531. 		let stored = '[]';
  532. 		try {
  533. 			stored = await GM_getValue(BLOCKED_SELECTORS_KEY, '[]');
  534. 			const parsed = JSON.parse(stored);
  535. 			blockedSelectorsCache = Array.isArray(parsed) ? parsed : [];
  536. 			console.log(SCRIPT_ID, `Loaded ${blockedSelectorsCache.length} rules from storage.`);
  537. 			return blockedSelectorsCache;
  538. 		} catch (e) {
  539. 			console.error(SCRIPT_ID, `Error parsing blocked selectors from key '${BLOCKED_SELECTORS_KEY}', resetting. Stored value:`, stored, e);
  540. 			try {
  541. 				await GM_setValue(BLOCKED_SELECTORS_KEY, '[]');
  542. 			} catch (resetError) {
  543. 				console.error(SCRIPT_ID, "Failed to reset storage after parse error", resetError);
  544. 			}
  545. 			blockedSelectorsCache = [];
  546. 			return [];
  547. 		}
  548. 	}
  549.  
  550. 	async function saveBlockedSelectors(list) {
  551. 		const selectorsToSave = Array.isArray(list) ? list : [];
  552. 		try {
  553. 			await GM_setValue(BLOCKED_SELECTORS_KEY, JSON.stringify(selectorsToSave));
  554. 			blockedSelectorsCache = [...selectorsToSave];
  555. 			console.log(SCRIPT_ID, `Saved ${selectorsToSave.length} rules.`);
  556. 		} catch (e) {
  557. 			console.error(SCRIPT_ID, "Error saving blocked selectors to GM:", e);
  558. 			showToast(STRINGS.settingsSaveError, 'error');
  559. 		}
  560. 	}
  561.  
  562. 	const originalDisplayMap = new Map();
  563.  
  564. 	async function applyBlocking(showToastNotification = false) {
  565. 		if (settings.tempBlockingDisabled) {
  566. 			console.log(SCRIPT_ID, "Blocking temporarily disabled. Skipping application.");
  567. 			disableAllBlocking(false);
  568. 			return 0;
  569. 		}
  570.  
  571. 		console.log(SCRIPT_ID, "Applying block rules...");
  572. 		if (blockedSelectorsCache.length === 0) {
  573. 			await loadBlockedSelectors();
  574. 		}
  575.  
  576. 		let count = 0;
  577. 		let appliedCount = 0;
  578. 		const currentHostname = location.hostname;
  579.  
  580. 		blockedSelectorsCache.forEach(rule => {
  581. 			if (typeof rule !== 'string' || !rule.includes('##')) {
  582. 				console.warn(SCRIPT_ID, "Skipping invalid block rule format:", rule);
  583. 				return;
  584. 			}
  585.  
  586. 			const parts = rule.split('##');
  587. 			const domain = parts[0];
  588. 			const cssSelector = parts[1];
  589.  
  590. 			if (!cssSelector) {
  591. 				console.warn(SCRIPT_ID, "Skipping rule with empty selector:", rule);
  592. 				return;
  593. 			}
  594. 			if (domain && domain !== '*' && currentHostname !== domain) {
  595. 				return;
  596. 			}
  597.  
  598. 			try {
  599. 				const elements = document.querySelectorAll(cssSelector);
  600. 				elements.forEach(el => {
  601. 					const isHiddenByScript = el.style.display === 'none' && el.hasAttribute('data-mes-hidden');
  602. 					const isNaturallyHidden = window.getComputedStyle(el).display === 'none';
  603.  
  604. 					if (!isHiddenByScript && !isNaturallyHidden) {
  605. 						if (!originalDisplayMap.has(el)) {
  606. 							originalDisplayMap.set(el, el.style.display || 'unset');
  607. 						}
  608. 						el.style.setProperty('display', 'none', 'important');
  609. 						el.setAttribute('data-mes-hidden', 'true');
  610. 						count++;
  611. 					} else if (isHiddenByScript) {
  612. 						if (!originalDisplayMap.has(el)) {
  613. 							originalDisplayMap.set(el, 'unset');
  614. 						}
  615. 					}
  616. 				});
  617. 				if (elements.length > 0) appliedCount++;
  618.  
  619. 			} catch (e) {}
  620. 		});
  621.  
  622. 		if (count > 0) console.log(SCRIPT_ID, `Applied ${appliedCount} rules, hid ${count} new elements.`);
  623. 		else console.log(SCRIPT_ID, `Applied ${appliedCount} rules, no new elements needed hiding.`);
  624.  
  625. 		if (showToastNotification && appliedCount > 0 && !settings.tempBlockingDisabled) {
  626. 			showToast(STRINGS.blockingApplied(appliedCount), 'success', 2000);
  627. 		}
  628. 		return appliedCount;
  629. 	}
  630.  
  631. 	function disableAllBlocking(showToastNotification = true) {
  632. 		console.log(SCRIPT_ID, "Disabling all blocking rules temporarily...");
  633. 		let restoredCount = 0;
  634. 		document.querySelectorAll('[data-mes-hidden="true"]').forEach(el => {
  635. 			const originalDisplay = originalDisplayMap.get(el);
  636. 			if (originalDisplay === 'unset') {
  637. 				el.style.removeProperty('display');
  638. 			} else if (originalDisplay !== undefined) {
  639. 				el.style.setProperty('display', originalDisplay, '');
  640. 			} else {
  641. 				el.style.removeProperty('display');
  642. 			}
  643. 			el.removeAttribute('data-mes-hidden');
  644. 			restoredCount++;
  645. 		});
  646. 		console.log(SCRIPT_ID, `Restored display for ${restoredCount} elements.`);
  647. 		if (showToastNotification) {
  648. 			showToast(STRINGS.tempBlockingOn, 'warning', 2500);
  649. 		}
  650. 	}
  651.  
  652. 	async function enableAllBlocking(showToastNotification = true) {
  653. 		console.log(SCRIPT_ID, "Re-enabling blocking rules...");
  654. 		const appliedCount = await applyBlocking(false);
  655. 		if (showToastNotification && appliedCount > 0) {
  656. 			showToast(STRINGS.tempBlockingOff, 'success', 2000);
  657. 		} else if (showToastNotification) {
  658. 			showToast(STRINGS.tempBlockingOff, 'info', 1500);
  659. 		}
  660. 	}
  661.  
  662. 	function updateToggleIcon() {
  663. 		if (!toggleBtn) return;
  664. 		if (settings.showAdguardLogo) {
  665. 			toggleBtn.innerHTML = `<span class="toggle-icon toggle-icon-adguard" aria-hidden="true"></span>`;
  666. 		} else {
  667. 			toggleBtn.innerHTML = `<span class="toggle-icon toggle-icon-plus" aria-hidden="true"></span>`;
  668. 		}
  669. 		toggleBtn.classList.toggle('selecting', selecting);
  670. 	}
  671.  
  672. 	function generateSelector(el, maxDepth = 7, requireUnique = true) {
  673. 		if (!el || el.nodeType !== 1 || el.closest('.mobile-block-ui')) return '';
  674.  
  675. 		if (el.id) {
  676. 			const id = el.id;
  677. 			const escapedId = CSS.escape(id);
  678. 			if (!/^\d+$/.test(id) && id.length > 2 && !id.startsWith('ember') && !id.startsWith('react') && !id.includes(':')) {
  679. 				try {
  680. 					if (document.querySelectorAll(`#${escapedId}`).length === 1) {
  681. 						return `#${escapedId}`;
  682. 					}
  683. 				} catch (e) {}
  684. 			}
  685. 		}
  686.  
  687. 		const parts = [];
  688. 		let current = el;
  689. 		let depth = 0;
  690.  
  691. 		while (current && current.tagName && depth < maxDepth) {
  692. 			const tagName = current.tagName.toLowerCase();
  693. 			if (tagName === 'body' || tagName === 'html') break;
  694. 			if (current.closest('.mobile-block-ui')) {
  695. 				current = current.parentElement;
  696. 				continue;
  697. 			}
  698.  
  699. 			let part = tagName;
  700. 			let addedSpecificity = false;
  701.  
  702. 			const stableClasses = Array.from(current.classList)
  703. 				.filter(c => c && c.length > 2 &&
  704. 					!/^[a-z]{1,2}$/i.test(c) &&
  705. 					!/\d/.test(c) &&
  706. 					!/active|select|focus|hover|disabled|open|closed|visible|hidden|js-|ui-/i.test(c) &&
  707. 					!/^[A-Z0-9]{4,}$/.test(c) &&
  708. 					!c.includes('--') && !c.includes('__') &&
  709. 					!['selected-element', 'mobile-block-ui'].some(uiClass => c.includes(uiClass)))
  710. 				.slice(0, 2);
  711.  
  712. 			if (stableClasses.length > 0) {
  713. 				part += '.' + stableClasses.map(c => CSS.escape(c)).join('.');
  714. 				addedSpecificity = true;
  715. 			}
  716.  
  717. 			if (!addedSpecificity || (current.parentElement && !current.parentElement.closest('.mobile-block-ui'))) {
  718. 				const siblings = current.parentElement ? Array.from(current.parentElement.children) : [];
  719. 				const sameTagSiblings = siblings.filter(sib => sib.tagName === current.tagName && !sib.closest('.mobile-block-ui'));
  720.  
  721. 				if (sameTagSiblings.length > 1) {
  722. 					const index = sameTagSiblings.indexOf(current) + 1;
  723. 					if (index > 0) {
  724. 						part += `:nth-of-type(${index})`;
  725. 						addedSpecificity = true;
  726. 					}
  727. 				}
  728. 			}
  729.  
  730. 			parts.unshift(part);
  731.  
  732. 			if (requireUnique && parts.length > 0 && depth > 0) {
  733. 				const tempSelector = parts.join(' > ');
  734. 				try {
  735. 					if (document.querySelectorAll(tempSelector).length === 1) {
  736. 						console.log(SCRIPT_ID, `Unique selector found early: ${tempSelector}`);
  737. 						return tempSelector;
  738. 					}
  739. 				} catch (e) {}
  740. 			}
  741.  
  742. 			current = current.parentElement;
  743. 			depth++;
  744. 		}
  745.  
  746. 		let finalSelector = parts.join(' > ');
  747.  
  748. 		if (requireUnique && finalSelector) {
  749. 			try {
  750. 				const matches = document.querySelectorAll(finalSelector);
  751. 				if (matches.length !== 1) {
  752. 					console.warn(SCRIPT_ID, `Generated selector "${finalSelector}" matches ${matches.length} elements. Trying parent recursively.`);
  753. 					if (el.parentElement && !el.parentElement.closest('.mobile-block-ui') && maxDepth > 0) {
  754. 						const parentSelector = generateSelector(el.parentElement, maxDepth - 1, false);
  755. 						if (parentSelector) {
  756. 							const combinedSelector = parentSelector + " > " + finalSelector;
  757. 							try {
  758. 								if (document.querySelectorAll(combinedSelector).length === 1) {
  759. 									console.log(SCRIPT_ID, `Using combined unique selector: ${combinedSelector}`);
  760. 									return combinedSelector;
  761. 								} else {
  762. 									console.warn(SCRIPT_ID, `Combined selector "${combinedSelector}" still not unique.`);
  763. 								}
  764. 							} catch (e) {}
  765. 						}
  766. 					}
  767. 					console.warn(SCRIPT_ID, `Could not guarantee uniqueness for: ${finalSelector}`);
  768. 					return finalSelector;
  769. 				}
  770. 			} catch (e) {
  771. 				console.error(SCRIPT_ID, `Error validating selector "${finalSelector}":`, e);
  772. 				return '';
  773. 			}
  774. 		}
  775.  
  776. 		if (!finalSelector || finalSelector === 'body' || finalSelector === 'html') {
  777. 			return '';
  778. 		}
  779.  
  780. 		return finalSelector;
  781. 	}
  782.  
  783. 	function initRefsAndEvents() {
  784. 		const infoLabel = panel.querySelector('#blocker-info-label');
  785. 		const info = panel.querySelector('#blocker-info');
  786. 		const slider = panel.querySelector('#blocker-slider');
  787. 		const copyBtn = panel.querySelector('#blocker-copy');
  788. 		const previewBtn = panel.querySelector('#blocker-preview');
  789. 		const addBtn = panel.querySelector('#blocker-add-block');
  790. 		const listBtn = panel.querySelector('#blocker-list');
  791. 		const settingsBtn = panel.querySelector('#blocker-settings');
  792. 		const cancelBtn = panel.querySelector('#blocker-cancel');
  793.  
  794. 		const listContainer = listPanel.querySelector('#blocklist-container');
  795. 		const listClose = listPanel.querySelector('#blocklist-close');
  796.  
  797. 		const settingsClose = settingsPanel.querySelector('#settings-close');
  798. 		const toggleSiteBtn = settingsPanel.querySelector('#settings-toggle-site');
  799. 		const adguardLogoToggleBtn = settingsPanel.querySelector('#settings-adguard-logo');
  800. 		const tempDisableBtn = settingsPanel.querySelector('#settings-temp-disable');
  801. 		const panelOpacitySlider = settingsPanel.querySelector('#settings-panel-opacity');
  802. 		const panelOpacityValue = settingsPanel.querySelector('#opacity-value');
  803. 		const toggleSizeSlider = settingsPanel.querySelector('#settings-toggle-size');
  804. 		const toggleSizeValue = settingsPanel.querySelector('#toggle-size-value');
  805. 		const toggleOpacitySlider = settingsPanel.querySelector('#settings-toggle-opacity');
  806. 		const toggleOpacityValue = settingsPanel.querySelector('#toggle-opacity-value');
  807. 		const cornerButtons = settingsPanel.querySelectorAll('.corner-btn');
  808. 		const backupBtn = settingsPanel.querySelector('#settings-backup');
  809. 		const restoreBtn = settingsPanel.querySelector('#settings-restore');
  810. 		const restoreInput = settingsPanel.querySelector('#settings-restore-input');
  811.  
  812. 		let isPreviewHidden = false;
  813. 		let previewedElement = null;
  814.  
  815. 		function removeSelectionHighlight() {
  816. 			if (selectedEl) {
  817. 				selectedEl.classList.remove('selected-element');
  818. 			}
  819. 			selectedEl = null;
  820. 			if (slider) slider.value = 0;
  821. 			if (info) info.textContent = '';
  822. 		}
  823.  
  824. 		function resetPreview() {
  825. 			if (isPreviewHidden && previewedElement) {
  826. 				try {
  827. 					const originalDisplay = previewedElement.dataset._original_display;
  828. 					if (originalDisplay === 'unset') {
  829. 						previewedElement.style.removeProperty('display');
  830. 					} else if (originalDisplay !== undefined) {
  831. 						previewedElement.style.setProperty('display', originalDisplay, '');
  832. 					}
  833. 					delete previewedElement.dataset._original_display;
  834. 					if (previewedElement === selectedEl) {
  835. 						previewedElement.classList.add('selected-element');
  836. 					}
  837. 				} catch (e) {
  838. 					console.warn(SCRIPT_ID, "Error resetting preview style:", e)
  839. 				}
  840. 			}
  841. 			if (previewBtn) {
  842. 				previewBtn.textContent = STRINGS.preview;
  843. 				previewBtn.classList.remove('tertiary');
  844. 				previewBtn.classList.add('secondary');
  845. 			}
  846. 			isPreviewHidden = false;
  847. 			previewedElement = null;
  848. 		}
  849.  
  850. 		function updateInfo() {
  851. 			if (!info) return;
  852. 			const selectorText = selectedEl ? generateSelector(selectedEl, 7, false) : '';
  853. 			info.textContent = selectorText;
  854. 			infoLabel.style.display = 'block';
  855. 		}
  856.  
  857. 		let activePanel = null;
  858.  
  859. 		function setPanelVisibility(panelElement, visible) {
  860. 			if (!panelElement) return;
  861.  
  862. 			if (visible) {
  863. 				[panel, settingsPanel, listPanel].forEach(p => {
  864. 					if (p && p !== panelElement && p.classList.contains('visible')) {
  865. 						p.classList.remove('visible');
  866. 						const transitionEndHandler = () => {
  867. 							if (!p.classList.contains('visible')) p.style.display = 'none';
  868. 							p.removeEventListener('transitionend', transitionEndHandler);
  869. 						};
  870. 						p.addEventListener('transitionend', transitionEndHandler);
  871. 						setTimeout(() => {
  872. 							if (!p.classList.contains('visible')) p.style.display = 'none';
  873. 							p.removeEventListener('transitionend', transitionEndHandler);
  874. 						}, 350);
  875. 					}
  876. 				});
  877.  
  878. 				activePanel = panelElement;
  879. 				panelElement.style.display = 'block';
  880. 				requestAnimationFrame(() => {
  881. 					requestAnimationFrame(() => {
  882. 						panelElement.classList.add('visible');
  883. 					});
  884. 				});
  885. 			} else {
  886. 				if (activePanel === panelElement) activePanel = null;
  887. 				panelElement.classList.remove('visible');
  888. 				const transitionEndHandler = () => {
  889. 					if (!panelElement.classList.contains('visible')) panelElement.style.display = 'none';
  890. 					panelElement.removeEventListener('transitionend', transitionEndHandler);
  891. 				};
  892. 				panelElement.addEventListener('transitionend', transitionEndHandler);
  893. 				setTimeout(() => {
  894. 					if (!panelElement.classList.contains('visible')) panelElement.style.display = 'none';
  895. 					panelElement.removeEventListener('transitionend', transitionEndHandler);
  896. 				}, 350);
  897. 			}
  898. 		}
  899.  
  900. 		async function addBlockRule(selector) {
  901. 			console.log('[addBlockRule] Attempting for selector:', selector);
  902. 			if (!selector) {
  903. 				return {
  904. 					success: false,
  905. 					message: STRINGS.cannotGenerateSelector
  906. 				};
  907. 			}
  908.  
  909. 			let fullSelector = "##" + selector;
  910. 			if (settings.includeSiteName) {
  911. 				const hostname = location.hostname;
  912. 				if (!hostname) {
  913. 					console.error(SCRIPT_ID, "Could not get location.hostname");
  914. 					return {
  915. 						success: false,
  916. 						message: '호스트 이름을 가져올 수 없습니다.'
  917. 					};
  918. 				}
  919. 				fullSelector = hostname + fullSelector;
  920. 			}
  921.  
  922. 			if (blockedSelectorsCache.includes(fullSelector)) {
  923. 				console.log(SCRIPT_ID, "Rule already exists:", fullSelector);
  924. 				return {
  925. 					success: false,
  926. 					message: STRINGS.ruleExists
  927. 				};
  928. 			}
  929.  
  930. 			const updatedList = [...blockedSelectorsCache, fullSelector];
  931. 			await saveBlockedSelectors(updatedList);
  932.  
  933. 			console.log(SCRIPT_ID, "Rule added:", fullSelector);
  934. 			return {
  935. 				success: true,
  936. 				rule: fullSelector
  937. 			};
  938. 		}
  939.  
  940. 		async function showList() {
  941. 			console.log('[showList] Function called');
  942. 			try {
  943. 				const arr = await loadBlockedSelectors();
  944. 				console.log(`[showList] Rendering ${arr.length} rules.`);
  945. 				listContainer.innerHTML = '';
  946.  
  947. 				if (arr.length === 0) {
  948. 					listContainer.innerHTML = `<p id="blocklist-empty">${STRINGS.noRules}</p>`;
  949. 				} else {
  950. 					arr.forEach((rule, index) => {
  951. 						const item = document.createElement('div');
  952. 						item.className = 'blocklist-item';
  953.  
  954. 						const span = document.createElement('span');
  955. 						span.textContent = rule;
  956. 						span.title = rule;
  957.  
  958. 						const controlsDiv = document.createElement('div');
  959. 						controlsDiv.className = 'blocklist-controls';
  960.  
  961. 						const copyButton = document.createElement('button');
  962. 						copyButton.className = 'mb-btn blocklist-btn blocklist-btn-copy';
  963. 						copyButton.textContent = STRINGS.copy;
  964. 						copyButton.title = '규칙 복사';
  965. 						copyButton.addEventListener('click', () => {
  966. 							try {
  967. 								GM_setClipboard(rule);
  968. 								showToast(STRINGS.ruleCopied, 'success', 2000);
  969. 							} catch (copyError) {
  970. 								console.error(SCRIPT_ID, "Error copying rule to clipboard:", copyError);
  971. 								showToast(STRINGS.clipboardError, 'error');
  972. 							}
  973. 						});
  974.  
  975. 						const deleteButton = document.createElement('button');
  976. 						deleteButton.className = 'mb-btn blocklist-btn blocklist-btn-delete';
  977. 						deleteButton.textContent = '삭제';
  978. 						deleteButton.title = '규칙 삭제';
  979. 						deleteButton.addEventListener('click', async () => {
  980. 							console.log('[showList] Delete button clicked for rule:', rule);
  981. 							try {
  982. 								const currentIndex = blockedSelectorsCache.indexOf(rule);
  983. 								if (currentIndex > -1) {
  984. 									blockedSelectorsCache.splice(currentIndex, 1);
  985. 									await saveBlockedSelectors(blockedSelectorsCache);
  986.  
  987. 									item.style.opacity = '0';
  988. 									item.style.transform = 'translateX(20px) scale(0.95)';
  989. 									setTimeout(async () => {
  990. 										item.remove();
  991. 										if (listContainer.childElementCount === 0) {
  992. 											listContainer.innerHTML = `<p id="blocklist-empty">${STRINGS.noRules}</p>`;
  993. 										}
  994. 										await applyBlocking(false);
  995. 										showToast(STRINGS.ruleDeleted, 'info', 2000);
  996. 									}, 300);
  997.  
  998. 								} else {
  999. 									console.warn("Rule not found in cache for deletion:", rule);
  1000. 									showToast(STRINGS.ruleDeleteError, 'error');
  1001. 									await showList();
  1002. 								}
  1003. 							} catch (deleteError) {
  1004. 								console.error(SCRIPT_ID, "Error deleting rule:", deleteError);
  1005. 								showToast(STRINGS.ruleDeleteError, 'error');
  1006. 							}
  1007. 						});
  1008.  
  1009. 						controlsDiv.append(copyButton, deleteButton);
  1010. 						item.append(span, controlsDiv);
  1011. 						listContainer.append(item);
  1012. 					});
  1013. 				}
  1014. 				console.log('[showList] Rendering list panel.');
  1015. 				setPanelVisibility(listPanel, true);
  1016.  
  1017. 			} catch (error) {
  1018. 				console.error(SCRIPT_ID, "Error in showList:", error);
  1019. 				showToast(STRINGS.listShowError, 'error');
  1020. 				setPanelVisibility(listPanel, false);
  1021. 			}
  1022. 		}
  1023.  
  1024. 		function applyGradientMask(container) {
  1025. 			if (!container) return;
  1026. 			const updateMask = () => {
  1027. 				const {
  1028. 					scrollTop,
  1029. 					scrollHeight,
  1030. 					clientHeight
  1031. 				} = container;
  1032. 				const isAtTop = scrollTop <= 0;
  1033. 				const isAtBottom = scrollTop + clientHeight >= scrollHeight - 1;
  1034. 				if (isAtTop && isAtBottom) {
  1035. 					container.style.webkitMaskImage = 'none';
  1036. 					container.style.maskImage = 'none';
  1037. 				} else if (isAtTop) {
  1038. 					container.style.webkitMaskImage = `linear-gradient(to bottom, black 0%, black 90%, transparent 100%)`;
  1039. 					container.style.maskImage = container.style.webkitMaskImage;
  1040. 				} else if (isAtBottom) {
  1041. 					container.style.webkitMaskImage = `linear-gradient(to bottom, transparent 0%, black 10%, black 100%)`;
  1042. 					container.style.maskImage = container.style.webkitMaskImage;
  1043. 				} else {
  1044. 					container.style.webkitMaskImage = `linear-gradient(to bottom, transparent 0%, black 10%, black 90%, transparent 100%)`;
  1045. 					container.style.maskImage = container.style.webkitMaskImage;
  1046. 				}
  1047. 			};
  1048.  
  1049. 			container.addEventListener('scroll', updateMask);
  1050. 			requestAnimationFrame(updateMask);
  1051. 		}
  1052.  
  1053. 		function setBlockMode(enabled) {
  1054. 			if (!toggleBtn || !panel) return;
  1055.  
  1056. 			selecting = enabled;
  1057. 			toggleBtn.classList.toggle('selecting', enabled);
  1058. 			updateToggleIcon();
  1059.  
  1060. 			if (enabled) {
  1061. 				setPanelVisibility(panel, true);
  1062. 				if (selectedEl) {
  1063. 					selectedEl.classList.add('selected-element');
  1064. 				}
  1065. 				updateInfo();
  1066. 			} else {
  1067. 				setPanelVisibility(panel, false);
  1068. 				if (activePanel === listPanel) setPanelVisibility(listPanel, false);
  1069. 				if (activePanel === settingsPanel) setPanelVisibility(settingsPanel, false);
  1070.  
  1071. 				removeSelectionHighlight();
  1072. 				resetPreview();
  1073. 				initialTouchedElement = null;
  1074. 			}
  1075. 			console.log(SCRIPT_ID, "Selection mode:", enabled ? "ON" : "OFF");
  1076. 		}
  1077.  
  1078.  
  1079. 		console.log(SCRIPT_ID, 'Attaching event listeners...');
  1080.  
  1081. 		toggleBtn.addEventListener('click', () => {
  1082. 			setBlockMode(!selecting);
  1083. 		});
  1084.  
  1085. 		copyBtn.addEventListener('click', () => {
  1086. 			if (!selectedEl) {
  1087. 				showToast(STRINGS.noElementSelected, 'warning');
  1088. 				return;
  1089. 			}
  1090. 			const selector = generateSelector(selectedEl, 7, true);
  1091. 			if (!selector) {
  1092. 				showToast(STRINGS.cannotGenerateSelector, 'error');
  1093. 				return;
  1094. 			}
  1095.  
  1096. 			let finalSelector = "##" + selector;
  1097. 			if (settings.includeSiteName) {
  1098. 				finalSelector = location.hostname + finalSelector;
  1099. 			}
  1100. 			try {
  1101. 				GM_setClipboard(finalSelector);
  1102. 				showToast(STRINGS.selectorCopied, 'success');
  1103. 			} catch (err) {
  1104. 				console.error(SCRIPT_ID, "Error copying to clipboard:", err);
  1105. 				showToast(STRINGS.clipboardError, 'error');
  1106. 				try {
  1107. 					prompt(STRINGS.promptCopy, finalSelector);
  1108. 				} catch (e) {}
  1109. 			}
  1110. 		});
  1111.  
  1112. 		previewBtn.addEventListener('click', () => {
  1113. 			if (!selectedEl) {
  1114. 				showToast(STRINGS.noElementSelected, 'warning');
  1115. 				return;
  1116. 			}
  1117.  
  1118. 			if (!isPreviewHidden) {
  1119. 				if (window.getComputedStyle(selectedEl).display === 'none') {
  1120. 					showToast(STRINGS.alreadyHidden, 'info');
  1121. 					return;
  1122. 				}
  1123. 				const currentDisplay = selectedEl.style.display;
  1124. 				selectedEl.dataset._original_display = currentDisplay === '' ? 'unset' : currentDisplay;
  1125. 				selectedEl.style.setProperty('display', 'none', 'important');
  1126.  
  1127. 				previewBtn.textContent = STRINGS.restorePreview;
  1128. 				previewBtn.classList.remove('secondary');
  1129. 				previewBtn.classList.add('tertiary');
  1130. 				isPreviewHidden = true;
  1131. 				previewedElement = selectedEl;
  1132. 				selectedEl.classList.remove('selected-element');
  1133. 				console.log(SCRIPT_ID, "Previewing hide for:", selectedEl);
  1134.  
  1135. 			} else {
  1136. 				if (previewedElement && previewedElement !== selectedEl) {
  1137. 					showToast(STRINGS.previewDifferentElement, 'warning');
  1138. 					return;
  1139. 				}
  1140. 				resetPreview();
  1141. 				console.log(SCRIPT_ID, "Restored preview for:", previewedElement);
  1142. 			}
  1143. 		});
  1144.  
  1145. 		addBtn.addEventListener('click', async () => {
  1146. 			console.log('[addBtn] Clicked');
  1147. 			if (!selectedEl) {
  1148. 				showToast(STRINGS.noElementSelected, 'warning');
  1149. 				return;
  1150. 			}
  1151.  
  1152. 			try {
  1153. 				const selector = generateSelector(selectedEl, 7, true);
  1154. 				console.log('[addBtn] Generated selector for saving:', selector);
  1155. 				if (!selector) {
  1156. 					showToast(STRINGS.cannotGenerateSelector, 'error');
  1157. 					return;
  1158. 				}
  1159.  
  1160. 				const result = await addBlockRule(selector);
  1161. 				console.log('[addBtn] addBlockRule result:', result);
  1162.  
  1163. 				if (result.success) {
  1164. 					showToast(STRINGS.ruleSavedReloading, 'success', 2000);
  1165. 					try {
  1166. 						const ruleSelector = result.rule.split('##')[1];
  1167. 						document.querySelectorAll(ruleSelector).forEach(el => {
  1168. 							if (!originalDisplayMap.has(el)) {
  1169. 								originalDisplayMap.set(el, el.style.display || 'unset');
  1170. 							}
  1171. 							el.style.setProperty('display', 'none', 'important');
  1172. 							el.setAttribute('data-mes-hidden', 'true');
  1173. 						});
  1174. 					} catch (applyError) {
  1175. 						console.error(SCRIPT_ID, "Error applying rule immediately after save:", applyError);
  1176. 						showToast(STRINGS.ruleSavedApplyFailed, 'warning', 3000);
  1177. 					}
  1178. 					setBlockMode(false);
  1179.  
  1180. 				} else {
  1181. 					showToast(result.message || STRINGS.ruleAddError, result.success ? 'success' : 'info');
  1182. 				}
  1183. 			} catch (error) {
  1184. 				console.error(SCRIPT_ID, "Error during Save Rule click:", error);
  1185. 				showToast(`${STRINGS.ruleAddError} ${error.message}`, 'error');
  1186. 			}
  1187. 		});
  1188.  
  1189. 		listBtn.addEventListener('click', () => {
  1190. 			console.log('[listBtn] Clicked');
  1191. 			setPanelVisibility(panel, false);
  1192. 			showList();
  1193. 		});
  1194.  
  1195. 		settingsBtn.addEventListener('click', () => {
  1196. 			console.log('[settingsBtn] Clicked');
  1197. 			setPanelVisibility(panel, false);
  1198. 			setPanelVisibility(settingsPanel, true);
  1199. 		});
  1200.  
  1201. 		cancelBtn.addEventListener('click', () => {
  1202. 			setBlockMode(false);
  1203. 		});
  1204.  
  1205. 		listClose.addEventListener('click', () => {
  1206. 			console.log('[listClose] Clicked');
  1207. 			setPanelVisibility(listPanel, false);
  1208. 			if (selecting) {
  1209. 				console.log('[listClose] Restoring main panel');
  1210. 				setPanelVisibility(panel, true);
  1211. 			}
  1212. 		});
  1213.  
  1214. 		settingsClose.addEventListener('click', () => {
  1215. 			console.log('[settingsClose] Clicked');
  1216. 			setPanelVisibility(settingsPanel, false);
  1217. 			if (selecting) {
  1218. 				console.log('[settingsClose] Restoring main panel');
  1219. 				setPanelVisibility(panel, true);
  1220. 			}
  1221. 		});
  1222.  
  1223. 		toggleSiteBtn.addEventListener('click', async () => {
  1224. 			settings.includeSiteName = !settings.includeSiteName;
  1225. 			toggleSiteBtn.textContent = settings.includeSiteName ? STRINGS.on : STRINGS.off;
  1226. 			toggleSiteBtn.classList.toggle('active', settings.includeSiteName);
  1227. 			await saveSettings();
  1228. 			showToast(STRINGS.settingsSaved, 'info', 1500);
  1229. 		});
  1230.  
  1231. 		adguardLogoToggleBtn.addEventListener('click', async () => {
  1232. 			settings.showAdguardLogo = !settings.showAdguardLogo;
  1233. 			adguardLogoToggleBtn.textContent = settings.showAdguardLogo ? STRINGS.on : STRINGS.off;
  1234. 			adguardLogoToggleBtn.classList.toggle('active', settings.showAdguardLogo);
  1235. 			updateToggleIcon();
  1236. 			await saveSettings();
  1237. 			showToast(STRINGS.settingsSaved, 'info', 1500);
  1238. 		});
  1239.  
  1240. 		tempDisableBtn.addEventListener('click', async () => {
  1241. 			settings.tempBlockingDisabled = !settings.tempBlockingDisabled;
  1242. 			tempDisableBtn.textContent = settings.tempBlockingDisabled ? STRINGS.on : STRINGS.off;
  1243. 			tempDisableBtn.classList.toggle('active', settings.tempBlockingDisabled);
  1244. 			tempDisableBtn.classList.toggle('error', settings.tempBlockingDisabled);
  1245. 			tempDisableBtn.classList.toggle('secondary', !settings.tempBlockingDisabled);
  1246.  
  1247. 			if (settings.tempBlockingDisabled) {
  1248. 				disableAllBlocking();
  1249. 			} else {
  1250. 				await enableAllBlocking();
  1251. 			}
  1252. 			await saveSettings();
  1253. 		});
  1254.  
  1255. 		const updateCornerButtons = (activeCorner) => {
  1256. 			cornerButtons.forEach(btn => {
  1257. 				btn.classList.toggle('active', btn.dataset.corner === activeCorner);
  1258. 			});
  1259. 		};
  1260.  
  1261. 		cornerButtons.forEach(button => {
  1262. 			button.addEventListener('click', async () => {
  1263. 				const selectedCorner = button.dataset.corner;
  1264. 				if (settings.toggleBtnCorner !== selectedCorner) {
  1265. 					settings.toggleBtnCorner = selectedCorner;
  1266. 					updateCornerButtons(selectedCorner);
  1267. 					applyToggleBtnPosition();
  1268. 					await saveSettings();
  1269. 					showToast(STRINGS.settingsSaved, 'info', 1500);
  1270. 				}
  1271. 			});
  1272. 		});
  1273.  
  1274. 		updateCornerButtons(settings.toggleBtnCorner);
  1275.  
  1276.  
  1277. 		let saveTimeout;
  1278. 		const debounceSaveSettings = () => {
  1279. 			clearTimeout(saveTimeout);
  1280. 			saveTimeout = setTimeout(async () => {
  1281. 				await saveSettings();
  1282. 				console.log(SCRIPT_ID, "Settings saved via debounce");
  1283. 			}, 500);
  1284. 		};
  1285.  
  1286. 		panelOpacitySlider.addEventListener('input', e => {
  1287. 			const newValue = parseFloat(e.target.value);
  1288. 			settings.panelOpacity = newValue;
  1289. 			panelOpacityValue.textContent = newValue.toFixed(2);
  1290. 			document.documentElement.style.setProperty('--panel-opacity', newValue);
  1291. 			document.querySelectorAll('#mobile-block-panel, #mobile-settings-panel, #mobile-blocklist-panel').forEach(p => {
  1292. 				p.style.setProperty('background-color', `rgba(40, 43, 48, ${newValue})`, 'important');
  1293. 			});
  1294. 			debounceSaveSettings();
  1295. 		});
  1296.  
  1297. 		toggleSizeSlider.addEventListener('input', e => {
  1298. 			const newValue = parseFloat(e.target.value);
  1299. 			settings.toggleSizeScale = newValue;
  1300. 			toggleSizeValue.textContent = newValue.toFixed(1) + 'x';
  1301. 			document.documentElement.style.setProperty('--toggle-size', `${56 * newValue}px`);
  1302. 			if (toggleBtn) {
  1303. 				toggleBtn.style.setProperty('width', `var(--toggle-size)`, 'important');
  1304. 				toggleBtn.style.setProperty('height', `var(--toggle-size)`, 'important');
  1305. 			}
  1306. 			debounceSaveSettings();
  1307. 		});
  1308.  
  1309. 		toggleOpacitySlider.addEventListener('input', e => {
  1310. 			const newValue = parseFloat(e.target.value);
  1311. 			settings.toggleOpacity = newValue;
  1312. 			toggleOpacityValue.textContent = newValue.toFixed(2);
  1313. 			document.documentElement.style.setProperty('--toggle-opacity', newValue);
  1314. 			if (toggleBtn) {
  1315. 				toggleBtn.style.setProperty('opacity', newValue, 'important');
  1316. 			}
  1317. 			debounceSaveSettings();
  1318. 		});
  1319.  
  1320. 		backupBtn.addEventListener('click', async () => {
  1321. 			try {
  1322. 				const rules = await loadBlockedSelectors();
  1323. 				if (rules.length === 0) {
  1324. 					showToast('ℹ️ 백업할 규칙이 없습니다.', 'info');
  1325. 					return;
  1326. 				}
  1327. 				const jsonString = JSON.stringify(rules, null, 2);
  1328. 				const blob = new Blob([jsonString], {
  1329. 					type: 'application/json'
  1330. 				});
  1331. 				const url = URL.createObjectURL(blob);
  1332. 				const a = document.createElement('a');
  1333. 				const timestamp = new Date().toISOString().slice(0, 19).replace(/:/g, '-');
  1334. 				a.href = url;
  1335. 				a.download = `mobile_element_selector_backup_${timestamp}.json`;
  1336. 				document.body.appendChild(a);
  1337. 				a.click();
  1338. 				document.body.removeChild(a);
  1339. 				URL.revokeObjectURL(url);
  1340. 				showToast(STRINGS.backupStarting, 'success');
  1341. 			} catch (err) {
  1342. 				console.error(SCRIPT_ID, "Backup failed:", err);
  1343. 				showToast(STRINGS.backupError, 'error');
  1344. 			}
  1345. 		});
  1346.  
  1347. 		restoreBtn.addEventListener('click', () => {
  1348. 			restoreInput.click();
  1349. 		});
  1350.  
  1351. 		restoreInput.addEventListener('change', async (event) => {
  1352. 			const file = event.target.files[0];
  1353. 			if (!file) return;
  1354.  
  1355. 			const reader = new FileReader();
  1356. 			reader.onload = async (e) => {
  1357. 				try {
  1358. 					const content = e.target.result;
  1359. 					const parsedRules = JSON.parse(content);
  1360.  
  1361. 					if (!Array.isArray(parsedRules) || !parsedRules.every(item => typeof item === 'string')) {
  1362. 						throw new Error("Invalid file content - expected an array of strings.");
  1363. 					}
  1364. 					if (!parsedRules.every(item => item.includes('##') || parsedRules.length === 0)) {
  1365. 						console.warn(SCRIPT_ID, "Restored rules contain items without '##'. Proceeding anyway.");
  1366. 					}
  1367.  
  1368. 					await saveBlockedSelectors(parsedRules);
  1369. 					await applyBlocking(true);
  1370. 					showToast(STRINGS.restoreSuccess, 'success', 2500);
  1371.  
  1372. 					if (listPanel.classList.contains('visible')) {
  1373. 						await showList();
  1374. 					}
  1375. 					if (settingsPanel.classList.contains('visible')) {
  1376. 						tempDisableBtn.classList.toggle('active', settings.tempBlockingDisabled);
  1377. 						tempDisableBtn.classList.toggle('error', settings.tempBlockingDisabled);
  1378. 						tempDisableBtn.classList.toggle('secondary', !settings.tempBlockingDisabled);
  1379. 						tempDisableBtn.textContent = settings.tempBlockingDisabled ? STRINGS.on : STRINGS.off;
  1380. 					}
  1381.  
  1382. 				} catch (err) {
  1383. 					console.error(SCRIPT_ID, "Restore failed:", err);
  1384. 					if (err instanceof SyntaxError || err.message.includes("Invalid file content")) {
  1385. 						showToast(STRINGS.restoreErrorInvalidFile, 'error');
  1386. 					} else {
  1387. 						showToast(STRINGS.restoreErrorGeneral, 'error');
  1388. 					}
  1389. 				} finally {
  1390. 					restoreInput.value = '';
  1391. 				}
  1392. 			};
  1393. 			reader.onerror = (e) => {
  1394. 				console.error(SCRIPT_ID, "File reading error:", e);
  1395. 				showToast(STRINGS.restoreErrorGeneral, 'error');
  1396. 				restoreInput.value = '';
  1397. 			};
  1398. 			reader.readAsText(file);
  1399. 		});
  1400.  
  1401. 		document.addEventListener('touchstart', e => {
  1402. 			if (!selecting) return;
  1403.  
  1404. 			if (e.target.closest('.mobile-block-ui')) {
  1405. 				initialTouchedElement = null;
  1406. 				return;
  1407. 			}
  1408.  
  1409. 			const touch = e.touches[0];
  1410. 			touchStartX = touch.clientX;
  1411. 			touchStartY = touch.clientY;
  1412. 			touchMoved = false;
  1413.  
  1414. 			const potentialTarget = document.elementFromPoint(touchStartX, touchStartY);
  1415. 			if (potentialTarget && !potentialTarget.closest('.mobile-block-ui') && potentialTarget.tagName !== 'BODY' && potentialTarget.tagName !== 'HTML') {
  1416. 				initialTouchedElement = potentialTarget;
  1417. 			} else {
  1418. 				initialTouchedElement = null;
  1419. 			}
  1420. 		}, {
  1421. 			passive: true
  1422. 		});
  1423.  
  1424. 		document.addEventListener('touchmove', e => {
  1425. 			if (!selecting || touchMoved || !e.touches[0]) return;
  1426.  
  1427. 			if (e.target.closest('.mobile-block-ui')) return;
  1428.  
  1429.  
  1430. 			const touch = e.touches[0];
  1431. 			const dx = touch.clientX - touchStartX;
  1432. 			const dy = touch.clientY - touchStartY;
  1433. 			if (Math.sqrt(dx * dx + dy * dy) > moveThreshold) {
  1434. 				touchMoved = true;
  1435. 				if (selectedEl) {
  1436. 					selectedEl.classList.remove('selected-element');
  1437. 				}
  1438. 				initialTouchedElement = null;
  1439. 			}
  1440. 		}, {
  1441. 			passive: true
  1442. 		});
  1443.  
  1444. 		document.addEventListener('touchend', e => {
  1445. 			if (!selecting) return;
  1446.  
  1447. 			const touchEndTarget = e.target;
  1448.  
  1449. 			if (touchEndTarget.closest('.mobile-block-ui .mb-btn') || touchEndTarget === toggleBtn || toggleBtn.contains(touchEndTarget)) {
  1450. 				touchMoved = false;
  1451. 				return;
  1452. 			}
  1453. 			if (touchEndTarget.closest('.mobile-block-ui')) {
  1454. 				touchMoved = false;
  1455. 				return;
  1456. 			}
  1457.  
  1458.  
  1459. 			if (!touchMoved) {
  1460. 				try {
  1461. 					e.preventDefault();
  1462. 					e.stopImmediatePropagation();
  1463. 				} catch (err) {
  1464. 					console.warn(SCRIPT_ID, "Could not preventDefault/stopImmediatePropagation on touchend:", err);
  1465. 				}
  1466. 			} else {
  1467. 				touchMoved = false;
  1468. 				return;
  1469. 			}
  1470.  
  1471. 			const touch = e.changedTouches[0];
  1472. 			if (!touch) return;
  1473.  
  1474. 			let targetEl = initialTouchedElement;
  1475. 			if (!targetEl || targetEl.closest('.mobile-block-ui')) {
  1476. 				targetEl = document.elementFromPoint(touch.clientX, touch.clientY);
  1477. 			}
  1478. 			while (targetEl && (targetEl.nodeType !== 1 || targetEl.closest('.mobile-block-ui'))) {
  1479. 				targetEl = targetEl.parentElement;
  1480. 			}
  1481.  
  1482. 			if (targetEl && targetEl.tagName !== 'BODY' && targetEl.tagName !== 'HTML') {
  1483. 				removeSelectionHighlight();
  1484. 				resetPreview();
  1485. 				selectedEl = targetEl;
  1486. 				initialTouchedElement = selectedEl;
  1487. 				selectedEl.classList.add('selected-element');
  1488. 				if (slider) slider.value = 0;
  1489. 				updateInfo();
  1490. 			} else {
  1491. 				removeSelectionHighlight();
  1492. 				resetPreview();
  1493. 				updateInfo();
  1494. 				initialTouchedElement = null;
  1495. 			}
  1496. 		}, {
  1497. 			capture: true,
  1498. 			passive: false
  1499. 		});
  1500.  
  1501. 		slider.addEventListener('input', (e) => {
  1502. 			if (!initialTouchedElement) {
  1503. 				if (selectedEl) {
  1504. 					initialTouchedElement = selectedEl;
  1505. 				} else {
  1506. 					return;
  1507. 				}
  1508. 			}
  1509. 			resetPreview();
  1510. 			const level = parseInt(e.target.value, 10);
  1511. 			let current = initialTouchedElement;
  1512. 			for (let i = 0; i < level && current.parentElement; i++) {
  1513. 				if (['body', 'html'].includes(current.parentElement.tagName.toLowerCase()) || current.parentElement.closest('.mobile-block-ui')) {
  1514. 					break;
  1515. 				}
  1516. 				current = current.parentElement;
  1517. 			}
  1518. 			if (selectedEl !== current) {
  1519. 				if (selectedEl) {
  1520. 					selectedEl.classList.remove('selected-element');
  1521. 				}
  1522. 				selectedEl = current;
  1523. 				selectedEl.classList.add('selected-element');
  1524. 				updateInfo();
  1525. 			}
  1526. 		});
  1527.  
  1528. 		function makePanelDraggable(el) {
  1529. 			if (!el) return;
  1530. 			let startX, startY, elementStartX, elementStartY;
  1531. 			let dragging = false;
  1532. 			let movedSinceStart = false;
  1533. 			const dragThreshold = 5;
  1534.  
  1535. 			el.addEventListener('touchstart', (e) => {
  1536. 				const isInsideScrollable = e.target.closest('.scrollable-container');
  1537. 				if (isInsideScrollable) {
  1538. 					dragging = false;
  1539. 					return;
  1540. 				}
  1541.  
  1542. 				const ignore = e.target.closest('button, input, select, textarea, .blocklist-item, .mb-slider, #blocker-info, #blocklist-container');
  1543. 				if (ignore && el.contains(ignore)) return;
  1544.  
  1545. 				if (e.touches.length > 1) return;
  1546. 				dragging = true;
  1547. 				movedSinceStart = false;
  1548.  
  1549. 				const touch = e.touches[0];
  1550. 				startX = touch.clientX;
  1551. 				startY = touch.clientY;
  1552.  
  1553. 				const rect = el.getBoundingClientRect();
  1554.  
  1555. 				el.style.transition = 'none';
  1556. 				el.style.transform = 'none';
  1557. 				el.style.left = `${rect.left}px`;
  1558. 				el.style.top = `${rect.top}px`;
  1559. 				el.style.right = 'auto';
  1560. 				el.style.bottom = 'auto';
  1561.  
  1562. 				elementStartX = rect.left;
  1563. 				elementStartY = rect.top;
  1564. 				el.style.cursor = 'grabbing';
  1565. 			}, {
  1566. 				passive: true
  1567. 			});
  1568.  
  1569. 			el.addEventListener('touchmove', (e) => {
  1570. 				if (!dragging || e.touches.length > 1) return;
  1571. 				const touch = e.touches[0];
  1572. 				const dx = touch.clientX - startX;
  1573. 				const dy = touch.clientY - startY;
  1574.  
  1575. 				if (!movedSinceStart && Math.sqrt(dx * dx + dy * dy) > dragThreshold) {
  1576. 					movedSinceStart = true;
  1577. 				}
  1578. 				if (movedSinceStart) {
  1579. 					e.preventDefault();
  1580. 					const newX = Math.max(0, Math.min(elementStartX + dx, window.innerWidth - el.offsetWidth));
  1581. 					const newY = Math.max(0, Math.min(elementStartY + dy, window.innerHeight - el.offsetHeight));
  1582. 					el.style.left = `${newX}px`;
  1583. 					el.style.top = `${newY}px`;
  1584. 				}
  1585. 			}, {
  1586. 				passive: false
  1587. 			});
  1588.  
  1589. 			el.addEventListener('touchend', () => {
  1590. 				if (dragging && movedSinceStart) {
  1591. 					el.dataset.wasDragged = 'true';
  1592. 				}
  1593. 				dragging = false;
  1594. 				movedSinceStart = false;
  1595. 				el.style.cursor = 'grab';
  1596. 			});
  1597.  
  1598. 			el.addEventListener('touchcancel', () => {
  1599. 				dragging = false;
  1600. 				movedSinceStart = false;
  1601. 				el.style.cursor = 'grab';
  1602. 			});
  1603. 		}
  1604.  
  1605. 		makePanelDraggable(panel);
  1606. 		makePanelDraggable(settingsPanel);
  1607. 		makePanelDraggable(listPanel);
  1608.  
  1609. 		const settingsScrollable = settingsPanel.querySelector('.scrollable-container');
  1610. 		if (settingsScrollable) applyGradientMask(settingsScrollable);
  1611.  
  1612. 		console.log(SCRIPT_ID, 'Initialization complete.');
  1613. 	}
  1614.  
  1615. 	async function run() {
  1616. 		await loadSettings();
  1617. 		if (document.readyState === 'loading') {
  1618. 			document.addEventListener('DOMContentLoaded', createUIElements);
  1619. 		} else {
  1620. 			createUIElements();
  1621. 		}
  1622. 	}
  1623.  
  1624. 	run().catch(error => {
  1625. 		console.error(SCRIPT_ID, "Unhandled error during script initialization:", error);
  1626. 	});
  1627.  
  1628. })();