☰

Link Open Mode Tooltip Enhancer

Displays tooltips showing link open modes with color coding: blue for new tab, red for current page, supports Chinese and English.Adjust the display of the lower left and lower right corners at the same time

  1. // ==UserScript==
  2. // @name        Link Open Mode Tooltip Enhancer
  3. // @name:zh-CN  链接打开方式提示增强器
  4. // @name:zh-TW  連結開啟方式提示增強器
  5. // @name:ja リンクオープンモードツールチップエンハンサー
  6. // @namespace   https://github.com/systemannounce/LinkTips
  7. // @version     0.1.0
  8. // @description Displays tooltips showing link open modes with color coding: blue for new tab, red for current page, supports Chinese and English.Adjust the display of the lower left and lower right corners at the same time
  9. // @description:ja リンクの開き方に応じてツールチップを表示します。新しいタブは青色、同じタブは赤色で表示され、言語は中英に対応します，左下隅と右下隅を同時にサポートするようにディスプレイを調整します。
  10. // @description:zh-CN 根据链接打开方式显示提示，新标签页蓝色提示，当前页面红色提示，支持中英文切换同时调整支持左下角和右下角的显示。
  11. // @description:zh-TW 根據鏈接打開方式顯示提示，新標籤頁藍色提示，當前頁面紅色提示，支援中英文切換，同时调整支持左下角和右下角的显示。
  12. // @author       Felix_SANA
  13. // @license     MIT
  14. // @match        *://*/*
  15. // @grant        GM_setValue
  16. // @grant        GM_getValue
  17. // @grant        GM_registerMenuCommand
  18. // ==/UserScript==
  19.  
  20. (function() {
  21.     'use strict';
  22.  
  23.     const userLang = navigator.language || navigator.userLanguage;
  24.     const isChinese = userLang.includes('zh');
  25.  
  26.     const messages = {
  27.         newTab: isChinese ? "新标签页打开" : "New tab",
  28.         currentTab: isChinese ? "当前页面覆盖" : "Current page"
  29.     };
  30.  
  31.     const tooltipLeft = document.createElement("div");
  32.     tooltipLeft.className = "link-tooltip-left";
  33.     document.body.appendChild(tooltipLeft);
  34.  
  35.     const tooltipRight = document.createElement("div");
  36.     tooltipRight.className = "link-tooltip-right";
  37.     document.body.appendChild(tooltipRight);
  38.  
  39.     const style = document.createElement('style');
  40.     style.textContent = `
  41.         .link-tooltip-left, .link-tooltip-right {
  42.             position: fixed;
  43.             bottom: 30px;
  44.             padding: 5px 10px;
  45.             color: white;
  46.             border-radius: 5px;
  47.             font-size: 12px;
  48.             display: none;
  49.             pointer-events: none;
  50.             z-index: 1000;
  51.         }
  52.         .link-tooltip-left {
  53.             left: 10px;
  54.         }
  55.         .link-tooltip-right {
  56.             right: 10px;
  57.         }
  58.         .link-tooltip-left.new-tab, .link-tooltip-right.new-tab {
  59.             background-color: blue;
  60.         }
  61.         .link-tooltip-left.current-tab, .link-tooltip-right.current-tab {
  62.             background-color: red;
  63.         }
  64.     `;
  65.     document.head.appendChild(style);
  66.  
  67.     const positions = {
  68.         left: 'left',
  69.         right: 'right',
  70.         both: 'both'
  71.     };
  72.  
  73.     let userPosition = GM_getValue('tooltipPosition', 'left');
  74.     updateTooltipVisibility(userPosition);
  75.  
  76.     GM_registerMenuCommand(isChinese ? "左下角显示" : "Show on bottom left", () => {
  77.         GM_setValue('tooltipPosition', 'left');
  78.         userPosition = 'left';
  79.         updateTooltipVisibility(userPosition);
  80.     });
  81.     GM_registerMenuCommand(isChinese ? "右下角显示" : "Show on bottom right", () => {
  82.         GM_setValue('tooltipPosition', 'right');
  83.         userPosition = 'right';
  84.         updateTooltipVisibility(userPosition);
  85.     });
  86.     GM_registerMenuCommand(isChinese ? "两边同时显示" : "Show on both sides", () => {
  87.         GM_setValue('tooltipPosition', 'both');
  88.         userPosition = 'both';
  89.         updateTooltipVisibility(userPosition);
  90.     });
  91.  
  92.     function updateTooltipVisibility(position) {
  93.         if (position === 'left') {
  94.             tooltipLeft.style.display = "block";
  95.             tooltipRight.style.display = "none";
  96.         } else if (position === 'right') {
  97.             tooltipLeft.style.display = "none";
  98.             tooltipRight.style.display = "block";
  99.         } else if (position === 'both') {
  100.             tooltipLeft.style.display = "block";
  101.             tooltipRight.style.display = "block";
  102.         }
  103.     }
  104.  
  105.     document.addEventListener("mouseover", function(event) {
  106.         const link = event.target.closest("a");
  107.         if (link) {
  108.             const isNewTab = link.target === "_blank";
  109.             const message = isNewTab ? messages.newTab : messages.currentTab;
  110.  
  111.             if (userPosition === 'left' || userPosition === 'both') {
  112.                 tooltipLeft.textContent = message;
  113.                 tooltipLeft.className = `link-tooltip-left ${isNewTab ? 'new-tab' : 'current-tab'}`;
  114.                 tooltipLeft.style.display = "block";
  115.             }
  116.  
  117.             if (userPosition === 'right' || userPosition === 'both') {
  118.                 tooltipRight.textContent = message;
  119.                 tooltipRight.className = `link-tooltip-right ${isNewTab ? 'new-tab' : 'current-tab'}`;
  120.                 tooltipRight.style.display = "block";
  121.             }
  122.         } else {
  123.             tooltipLeft.style.display = "none";
  124.             tooltipRight.style.display = "none";
  125.         }
  126.     });
  127.  
  128.     document.addEventListener("mouseout", function(event) {
  129.         if (event.target.tagName === "A") {
  130.             tooltipLeft.style.display = "none";
  131.             tooltipRight.style.display = "none";
  132.         }
  133.     });
  134. })();