移动端网络监测套件（极简版）

轻量级网络监测工具，优化性能与资源消耗喵～
目前为 2025-03-05 提交的版本。查看最新版本。
Wrap lines
// ==UserScript==
// @name         移动端网络监测套件（极简版）
// @namespace    http://tampermonkey.net/
// @version      4.5.3
// @description  轻量级网络监测工具，优化性能与资源消耗喵～
// @license      MIT
// @match        http://*/*
// @match        https://*/*
// @run-at       document-start
// @grant        none
// ==/UserScript==

(function() {
    'use strict';

    // 创建显示容器喵～(๑>ᴗ<๑)
    const container = (() => {
        const host = document.createElement('div');
        // 从 localStorage 读取保存的位置，若没有则使用默认值
        const savedLeft = localStorage.getItem('panelLeft') || '10px';
        const savedTop = localStorage.getItem('panelTop') || '10px';
        Object.assign(host.style, {
            position: 'fixed',
            left: savedLeft,
            top: savedTop,
            zIndex: '999998'
        });
        document.documentElement.appendChild(host);
        const shadow = host.attachShadow({ mode: 'closed' });
        const div = document.createElement('div');
        Object.assign(div.style, {
            padding: '5px 10px',
            background: 'rgba(40,40,40,0.9)',
            color: '#f0f0f0',
            borderRadius: '8px',
            fontSize: '12px',
            fontFamily: 'system-ui, sans-serif',
            cursor: 'move'
        });
        shadow.appendChild(div);

        // 添加拖拽功能喵～(๑>ᴗ<๑)
        let isDragging = false, offsetX, offsetY;
        function getClientX(e) {
            return e.touches ? e.touches[0].clientX : e.clientX;
        }
        function getClientY(e) {
            return e.touches ? e.touches[0].clientY : e.clientY;
        }
        const startDrag = e => {
            isDragging = true;
            const rect = host.getBoundingClientRect();
            offsetX = getClientX(e) - rect.left;
            offsetY = getClientY(e) - rect.top;
            e.preventDefault();
        };
const onDrag = e => {
            if (!isDragging) return;
            host.style.left = (getClientX(e) - offsetX) + 'px';
            host.style.top = (getClientY(e) - offsetY) + 'px';
        };
        const endDrag = () => {
            isDragging = false;
            // 保存位置到 localStorage 喵～
            localStorage.setItem('panelLeft', host.style.left);
            localStorage.setItem('panelTop', host.style.top);
        };
        host.addEventListener('mousedown', startDrag);
        document.addEventListener('mousemove', onDrag);
        document.addEventListener('mouseup', endDrag);
        host.addEventListener('touchstart', startDrag);
        document.addEventListener('touchmove', onDrag);
        document.addEventListener('touchend', endDrag);
        return div;
    })();

    let totalBytes = 0, latencyText = '延迟: ...', latencyColor = '#f0f0f0';

    const updatePanel = () => {
        container.innerHTML = `流量: ${formatSize(totalBytes)} | <span style="color: ${latencyColor}">${latencyText}</span>`;
    };

    const formatSize = bytes => {
        if (bytes < 1024) return `${bytes} B`;
        if (bytes < 1048576) return `${(bytes / 1024).toFixed(1)} KB`;
        return `${(bytes / 1048576).toFixed(2)} MB`;
    };

    new PerformanceObserver(list => {
        list.getEntries().forEach(entry => {
            const size = entry.transferSize || entry.decodedBodySize || 0;
            if (size > 0) totalBytes += size;
        });
        updatePanel();
    }).observe({ type: 'resource', buffered: true });

    const measureLatency = () => {
        const start = performance.now();
        fetch(`${location.origin}/?t=${start}`, { method: 'HEAD', mode: 'no-cors', cache: 'no-store' })
            .then(() => {
                const latency = performance.now() - start;
                latencyText = `延迟: ${latency.toFixed(1)}ms`;
                latencyColor = latency < 100 ? '#4caf50' : latency < 300 ? '#ffb300' : latency < 500 ? '#ff9800' : '#f44336';
                updatePanel();
            })
            .catch(() => {
                latencyText = '延迟: 错误';
                latencyColor = '#f44336';
                updatePanel();
            });
    };

    setInterval(measureLatency, 2000);
    measureLatency();
    updatePanel();
})();
欢迎访问Greasy Fork镜像
