☰

Network Speed Monitor

Hiển thị tốc độ mạng (download/upload) lên màn hình trong thời gian thực.

  1. // ==UserScript==
  2. // @name         Network Speed Monitor
  3. // @namespace    http://tampermonkey.net/
  4. // @version      0.1
  5. // @description  Hiển thị tốc độ mạng (download/upload) lên màn hình trong thời gian thực.
  6. // @author       Hà Trọng Nguyễn (htrnguyen)
  7. // @match        *://*/*
  8. // @grant        none
  9. // @icon         https://github.com/htrnguyen/Network-Speed-Monitor/raw/main/Network-Speed-Monitor-Logo.png
  10. // @license      MIT
  11. // @homepageURL  https://github.com/htrnguyen/Network-Speed-Monitor
  12. // @supportURL   https://github.com/htrnguyen/Network-Speed-Monitor/issues
  13. // ==/UserScript==
  14.  
  15. (function () {
  16.     'use strict';
  17.  
  18.     // Cấu hình
  19.     const CONFIG = {
  20.         position: 'bottom-left', // Vị trí hiển thị: 'bottom-left', 'bottom-right', 'top-left', 'top-right'
  21.         backgroundColor: 'rgba(0, 0, 0, 0.7)', // Màu nền
  22.         textColor: 'white', // Màu chữ
  23.         fontSize: '12px', // Kích thước chữ
  24.         padding: '5px', // Khoảng cách đệm
  25.         zIndex: 9999, // Độ ưu tiên hiển thị
  26.         updateInterval: 1000, // Thời gian cập nhật (ms)
  27.     };
  28.  
  29.     // Tạo div để hiển thị tốc độ mạng
  30.     const speedDiv = document.createElement('div');
  31.     speedDiv.style.position = 'fixed';
  32.     speedDiv.style.zIndex = CONFIG.zIndex;
  33.     speedDiv.style.backgroundColor = CONFIG.backgroundColor;
  34.     speedDiv.style.color = CONFIG.textColor;
  35.     speedDiv.style.padding = CONFIG.padding;
  36.     speedDiv.style.fontSize = CONFIG.fontSize;
  37.     speedDiv.style.borderRadius = '3px';
  38.     speedDiv.style.display = 'flex';
  39.     speedDiv.style.alignItems = 'center';
  40.     speedDiv.style.gap = '5px';
  41.  
  42.     // Đặt vị trí hiển thị
  43.     switch (CONFIG.position) {
  44.         case 'bottom-right':
  45.             speedDiv.style.bottom = '0';
  46.             speedDiv.style.right = '0';
  47.             break;
  48.         case 'top-left':
  49.             speedDiv.style.top = '0';
  50.             speedDiv.style.left = '0';
  51.             break;
  52.         case 'top-right':
  53.             speedDiv.style.top = '0';
  54.             speedDiv.style.right = '0';
  55.             break;
  56.         default: // bottom-left
  57.             speedDiv.style.bottom = '0';
  58.             speedDiv.style.left = '0';
  59.             break;
  60.     }
  61.  
  62.     // Thêm logo (tùy chọn)
  63.     const logo = document.createElement('img');
  64.     logo.src = 'https://github.com/htrnguyen/Network-Speed-Monitor/raw/main/Network-Speed-Monitor-Logo.png';
  65.     logo.style.width = '16px';
  66.     logo.style.height = '16px';
  67.     logo.style.borderRadius = '50%';
  68.     speedDiv.appendChild(logo);
  69.  
  70.     // Thêm thông tin tác giả (tùy chọn)
  71.     const authorInfo = document.createElement('span');
  72.     authorInfo.textContent = 'by Hà Trọng Nguyễn (htrnguyen)';
  73.     speedDiv.appendChild(authorInfo);
  74.  
  75.     // Thêm div vào body
  76.     document.body.appendChild(speedDiv);
  77.  
  78.     // Biến lưu trữ dữ liệu
  79.     let totalReceived = 0;
  80.     let totalSent = 0;
  81.  
  82.     // Hàm định dạng byte sang KB/MB
  83.     function formatBytes(bytes) {
  84.         if (bytes < 1024) return `${bytes} B`;
  85.         if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(2)} KB`;
  86.         return `${(bytes / (1024 * 1024)).toFixed(2)} MB`;
  87.     }
  88.  
  89.     // Hàm cập nhật tốc độ mạng
  90.     function updateSpeed() {
  91.         const resources = performance.getEntriesByType('resource');
  92.         const now = performance.now();
  93.  
  94.         // Tính toán dữ liệu nhận trong 1 giây
  95.         const receivedThisSecond = resources.reduce((acc, entry) => {
  96.             if (now - entry.responseEnd < 1000) acc += entry.transferSize;
  97.             return acc;
  98.         }, 0);
  99.  
  100.         totalReceived += receivedThisSecond;
  101.  
  102.         // Hiển thị thông tin
  103.         speedDiv.textContent = `↓ ${formatBytes(receivedThisSecond)}/s | ↑ ${formatBytes(totalSent)}`;
  104.     }
  105.  
  106.     // Theo dõi sự kiện upload file
  107.     document.body.addEventListener('change', (event) => {
  108.         if (event.target.tagName === 'INPUT' && event.target.type === 'file') {
  109.             const files = event.target.files;
  110.             for (let file of files) totalSent += file.size;
  111.         }
  112.     });
  113.  
  114.     // Cập nhật tốc độ mạng mỗi giây
  115.     setInterval(updateSpeed, CONFIG.updateInterval);
  116. })();