logo NodeSeekbeta

小脚本,给页面上的IP地址进行打码

// ==UserScript==
// @name         网络IP脱敏与恢复工具(自动贴边停靠版)
// @namespace    http://tampermonkey.net/
// @version      1.4
// @description  自动贴边悬浮按钮,低干扰 IP 脱敏与恢复
// @author       Gemini
// @match        *://*/*
// @grant        none
// ==/UserScript==

(function () {
    'use strict';

    /* =====================
       1. 正则定义
    ===================== */
    const ipv4Regex = /\b(?:\d{1,3}\.){3}\d{1,3}(?:\/\d{1,2})?\b/g;
    const ipv6Regex = /\b(?:[A-F0-9]{1,4}:){7}[A-F0-9]{1,4}(?:\/\d{1,3})?\b|\b((?:[A-F0-9]{1,4}(?::[A-F0-9]{1,4})*)?::(?:[A-F0-9]{1,4}(?::[A-F0-9]{1,4})*)?)(?:\/\d{1,3})?\b/gi;

    let isMasked = false;
    let hasProcessed = false;

    /* =====================
       2. 样式注入
    ===================== */
    const style = document.createElement('style');
    style.innerHTML = `
/* -------- IP 脱敏样式 -------- */
.ip-masked-active {
    filter: blur(5px) !important;
    background-color: rgba(0,0,0,0.12) !important;
    border-radius: 4px !important;
    padding: 0 2px;
    display: inline-block !important;
}

.ip-masked-normal {
    filter: none !important;
    background-color: transparent !important;
}

/* -------- 自动贴边停靠按钮 -------- */
#ip-mask-wrapper {
    position: fixed;
    top: 16px;
    right: 8px;
    z-index: 999999;
    pointer-events: none;
}

#ip-mask-toggle {
    pointer-events: auto;

    width: 38px;
    height: 38px;
    padding: 0;

    display: flex;
    align-items: center;
    justify-content: center;

    font-size: 16px;
    font-weight: 600;

    color: #ffffff;
    background: linear-gradient(135deg, #4facfe, #00f2fe);

    border: none;
    border-radius: 50%;
    cursor: pointer;

    box-shadow:
        0 6px 18px rgba(0, 0, 0, 0.25),
        inset 0 0 0 1px rgba(255,255,255,0.15);

    overflow: hidden;

    transition:
        width 0.25s ease,
        padding 0.25s ease,
        border-radius 0.25s ease,
        background 0.25s ease,
        box-shadow 0.15s ease;
}

#ip-mask-toggle span {
    display: none;
    margin-left: 6px;
    white-space: nowrap;
}

/* hover 展开 */
#ip-mask-wrapper:hover #ip-mask-toggle {
    width: auto;
    padding: 10px 18px;
    border-radius: 999px;
}

/* hover 显示文字 */
#ip-mask-wrapper:hover #ip-mask-toggle span {
    display: inline;
}

/* 脱敏开启状态 */
#ip-mask-toggle.masked {
    background: linear-gradient(135deg, #f39c12, #e67e22);
}
`;
    document.head.appendChild(style);

    /* =====================
       3. 创建按钮结构
    ===================== */
    const wrapper = document.createElement('div');
    wrapper.id = 'ip-mask-wrapper';

    const btn = document.createElement('button');
    btn.id = 'ip-mask-toggle';
    btn.innerHTML = '🛡️<span>隐私脱敏</span>';

    wrapper.appendChild(btn);
    document.body.appendChild(wrapper);

    /* =====================
       4. 核心逻辑
    ===================== */
    function toggleMask() {
        if (!isMasked) {
            if (!hasProcessed) {
                processAllNodes();
                hasProcessed = true;
            } else {
                updateClasses(true);
            }
            btn.innerHTML = '🔓<span>恢复显示</span>';
            btn.classList.add('masked');
            isMasked = true;
        } else {
            updateClasses(false);
            btn.innerHTML = '🛡️<span>隐私脱敏</span>';
            btn.classList.remove('masked');
            isMasked = false;
        }
    }

    /* =====================
       5. 首次遍历并包装 IP
    ===================== */
    function processAllNodes() {
        const walker = document.createTreeWalker(
            document.body,
            NodeFilter.SHOW_TEXT,
            null,
            false
        );

        const nodesToProcess = [];
        let node;

        while ((node = walker.nextNode())) {
            const parent = node.parentElement;
            if (!parent) continue;
            if (['SCRIPT', 'STYLE', 'TEXTAREA', 'INPUT'].includes(parent.tagName)) continue;

            if (ipv4Regex.test(node.nodeValue) || ipv6Regex.test(node.nodeValue)) {
                nodesToProcess.push(node);
            }
        }

        nodesToProcess.forEach(node => {
            const container = document.createElement('span');
            container.innerHTML = node.nodeValue
                .replace(ipv4Regex, '<span class="ip-wrap-target ip-masked-active">$&</span>')
                .replace(ipv6Regex, '<span class="ip-wrap-target ip-masked-active">$&</span>');

            if (container.childNodes.length > 0) {
                node.replaceWith(...container.childNodes);
            }
        });
    }

    /* =====================
       6. 状态切换(仅切 CSS)
    ===================== */
    function updateClasses(shouldMask) {
        document.querySelectorAll('.ip-wrap-target').forEach(el => {
            if (shouldMask) {
                el.classList.remove('ip-masked-normal');
                el.classList.add('ip-masked-active');
            } else {
                el.classList.remove('ip-masked-active');
                el.classList.add('ip-masked-normal');
            }
        });
    }

    /* =====================
       7. 事件绑定
    ===================== */
    btn.addEventListener('click', toggleMask);

})();

例如出🐔等场景,经常需要截图配置信息等等。
放到油猴里面即可。
当需要的时候点击右上角激活,也可以点击恢复。

image

效果:
image

你好啊,陌生人!

我的朋友,看起来你是新来的,如果想参与到讨论中,点击下面的按钮!

📈用户数目📈

目前论坛共有71644位seeker

🎉欢迎新用户🎉