Long-press on an element on your phone to bring up a menu to block it. Remembers your choices.
// ==UserScript==
// @name Website Element Blocker (Long-press to block)
// @name:zh-CN 网页元素屏蔽器 (长按屏蔽)
// @namespace http://tampermonkey.net/
// @version 1.6
// @description Long-press on an element on your phone to bring up a menu to block it. Remembers your choices.
// @description:zh-CN 在手机上长按一个元素，会弹出一个菜单来屏蔽它。可以记住你的选择。
// @author Your AI Assistant
// @match *://*/*
// @grant GM_setValue
// @grant GM_getValue
// @grant GM_registerMenuCommand
// @grant GM_addStyle
// ==/UserScript==
(function() {
'use strict';
// --- 配置 ---
const LONG_PRESS_DURATION = 500; // 长按时长 (毫秒)
const STORAGE_KEY_PREFIX = 'element_blocker_';
let pressTimer = null;
let longPressFired = false;
let targetElement = null;
let highlightElements = [];
// --- 样式注入 ---
GM_addStyle(`
.blocker-highlight-wrapper {
position: relative !important;
z-index: 2147483646 !important;
}
.blocker-highlight-border {
position: absolute;
background: linear-gradient(90deg,
rgba(255, 0, 0, 0.8) 0%,
rgba(255, 127, 0, 0.8) 25%,
rgba(255, 255, 0, 0.8) 50%,
rgba(0, 255, 0, 0.8) 75%,
rgba(0, 0, 255, 0.8) 100%);
animation: blocker-rainbow 2s linear infinite;
z-index: 2147483645;
pointer-events: none;
}
.blocker-highlight-top {
top: -4px;
left: 0;
right: 0;
height: 4px;
}
.blocker-highlight-right {
top: 0;
right: -4px;
bottom: 0;
width: 4px;
}
.blocker-highlight-bottom {
bottom: -4px;
left: 0;
right: 0;
height: 4px;
}
.blocker-highlight-left {
top: 0;
left: -4px;
bottom: 0;
width: 4px;
}
@keyframes blocker-rainbow {
0% { background-position: 0% 50%; }
100% { background-position: 100% 50%; }
}
#blocker-menu {
position: fixed;
bottom: 20px;
left: 50%;
transform: translateX(-50%);
background-color: #333;
color: white;
padding: 10px;
border-radius: 8px;
z-index: 2147483647 !important;
display: flex;
flex-direction: column;
gap: 8px;
box-shadow: 0 4px 15px rgba(0,0,0,0.4);
font-family: sans-serif;
font-size: 16px;
}
#blocker-menu button {
background-color: #555;
color: white;
border: none;
padding: 10px 15px;
border-radius: 5px;
cursor: pointer;
text-align: center;
}
#blocker-menu button:hover {
background-color: #777;
}
`);
// --- 核心功能 ---
function getCssSelector(el) {
if (!(el instanceof Element)) return;
const path = [];
while (el.nodeType === Node.ELEMENT_NODE) {
let selector = el.nodeName.toLowerCase();
if (el.id) {
selector += `#${el.id}`;
path.unshift(selector);
break;
} else {
let sib = el, nth = 1;
while (sib.previousElementSibling) {
sib = sib.previousElementSibling;
if (sib.nodeName.toLowerCase() == selector) nth++;
}
if (nth != 1) selector += `:nth-of-type(${nth})`;
}
path.unshift(selector);
el = el.parentNode;
}
return path.join(' > ');
}
function createHighlightBorder(className) {
const border = document.createElement('div');
border.className = `blocker-highlight-border ${className}`;
return border;
}
function highlightElement(el) {
unhighlightAll();
if (!el) return;
// 创建一个包装元素来包含边框
const wrapper = document.createElement('div');
wrapper.className = 'blocker-highlight-wrapper';
// 保存原始元素的样式和位置
const originalStyle = el.getAttribute('style') || '';
const originalPosition = window.getComputedStyle(el).position;
// 确保元素有相对定位以便边框正确放置
if (originalPosition === 'static') {
el.style.position = 'relative';
}
// 添加四个边框
wrapper.appendChild(createHighlightBorder('blocker-highlight-top'));
wrapper.appendChild(createHighlightBorder('blocker-highlight-right'));
wrapper.appendChild(createHighlightBorder('blocker-highlight-bottom'));
wrapper.appendChild(createHighlightBorder('blocker-highlight-left'));
// 用包装元素包裹原始元素
el.parentNode.insertBefore(wrapper, el);
wrapper.appendChild(el);
// 保存引用以便之后移除
highlightElements.push({
wrapper: wrapper,
originalStyle: originalStyle,
originalPosition: originalPosition,
element: el
});
}
function unhighlightAll() {
highlightElements.forEach(item => {
// 恢复原始元素的样式和位置
if (item.originalPosition === 'static') {
item.element.style.position = '';
}
item.element.setAttribute('style', item.originalStyle);
// 将元素放回原处并移除包装
item.wrapper.parentNode.insertBefore(item.element, item.wrapper);
item.wrapper.remove();
});
highlightElements = [];
}
function showBlockMenu(el) {
// 移除旧菜单
const oldMenu = document.getElementById('blocker-menu');
if (oldMenu) oldMenu.remove();
const menu = document.createElement('div');
menu.id = 'blocker-menu';
let currentEl = el;
let level = 0;
const createButton = (elem, text) => {
const button = document.createElement('button');
button.textContent = text;
button.onclick = (e) => {
e.stopPropagation();
blockElement(elem);
hideBlockMenu();
};
button.onmouseover = () => highlightElement(elem);
button.onmouseout = () => highlightElement(targetElement);
return button;
};
// 添加 "屏蔽当前" 按钮
menu.appendChild(createButton(currentEl, `屏蔽当前 (${currentEl.tagName.toLowerCase()})`));
// 添加 "屏蔽上层" 按钮 (最多5层)
while (currentEl.parentElement && level < 5) {
currentEl = currentEl.parentElement;
if (currentEl.tagName.toLowerCase() === 'body' || currentEl.tagName.toLowerCase() === 'html') break;
level++;
menu.appendChild(createButton(currentEl, `屏蔽上${level}层 (${currentEl.tagName.toLowerCase()})`));
}
const cancelButton = document.createElement('button');
cancelButton.textContent = '取消';
cancelButton.style.backgroundColor = '#800';
cancelButton.onclick = hideBlockMenu;
menu.appendChild(cancelButton);
document.body.appendChild(menu);
highlightElement(el);
}
function hideBlockMenu() {
const menu = document.getElementById('blocker-menu');
if (menu) menu.remove();
unhighlightAll();
}
function blockElement(el) {
const selector = getCssSelector(el);
if (!selector) return;
const hostname = window.location.hostname;
const key = STORAGE_KEY_PREFIX + hostname;
const blockedSelectors = GM_getValue(key, []);
if (!blockedSelectors.includes(selector)) {
blockedSelectors.push(selector);
GM_setValue(key, blockedSelectors);
applyBlocking(hostname);
console.log(`[Element Blocker] 已屏蔽: ${selector}`);
}
}
function applyBlocking(hostname) {
const key = STORAGE_KEY_PREFIX + hostname;
const selectors = GM_getValue(key, []);
if (selectors.length > 0) {
let style = document.getElementById('dynamic-blocker-style');
if (!style) {
style = document.createElement('style');
style.id = 'dynamic-blocker-style';
document.head.appendChild(style);
}
style.textContent = `${selectors.join(', ')} { display: none !important; }`;
console.log(`[Element Blocker] 已应用 ${selectors.length} 条屏蔽规则于 ${hostname}`);
}
}
function clearBlockingRules() {
const hostname = window.location.hostname;
const key = STORAGE_KEY_PREFIX + hostname;
GM_setValue(key, []);
const style = document.getElementById('dynamic-blocker-style');
if (style) style.textContent = '';
alert(`已清除网站 [${hostname}] 的所有屏蔽规则。`);
}
// --- 事件监听 ---
function onTouchStart(e) {
if (e.target.tagName === 'INPUT' || e.target.tagName === 'TEXTAREA' || e.target.isContentEditable) {
return;
}
longPressFired = false;
targetElement = e.target;
pressTimer = window.setTimeout(() => {
longPressFired = true;
e.preventDefault();
showBlockMenu(targetElement);
}, LONG_PRESS_DURATION);
}
function onTouchEnd(e) {
clearTimeout(pressTimer);
}
function onTouchMove(e) {
clearTimeout(pressTimer);
}
// 绑定事件
window.addEventListener('touchstart', onTouchStart, { passive: false });
window.addEventListener('touchend', onTouchEnd);
window.addEventListener('touchmove', onTouchMove);
// --- 页面加载时应用规则 & 注册菜单 ---
applyBlocking(window.location.hostname);
GM_registerMenuCommand('清除当前网站的屏蔽规则', clearBlockingRules);
})();