链接打开方式提示JS脚本

systemannounce

浏览器没有针对打开的链接是在新标签页打开还是当前页面打开。
导致某些填表网站或者评论网站，点个帮助或者什么外链就把当前页面给覆盖了，导致如果已经写了评论或者填的表格全部作废的悲惨情况
于是就想到写一个油猴脚本在浏览器的左下角或者右下角提示当前鼠标下的链接是新标签页打开还是当前页面打开
尽最大可能避免悲剧发生。
只需要将代码新建一个Tampermonkey（油猴）脚本运行即可。

这里有脚本的Greasy Fork地址：https://greasyfork.org/zh-CN/scripts/507229-link-open-mode-tooltip-enhancer
演示效果：





功能
链接打开提示:在用户鼠标悬停在链接上时显示提示框，告知链接将在哪种方式打开。
颜色编码提示:

• 新标签页打开链接时，显示蓝色提示框。
• 当前页面打开链接时，显示红色提示框。
• 多语言支持: 自动检测用户的浏览器语言，支持中文和英文显示。
• 用户自定义：支持切换提示框的位置，左下角还是右下角。
  

使用方法
安装脚本后，脚本会在所有网页上自动运行。
当鼠标悬停在链接上时，页面左下角会显示提示框，显示链接的打开方式及对应颜色提示。

[JavaScript] 纯文本查看 复制代码

// ==UserScript==
// @name        Link Open Mode Tooltip Enhancer
// @version     0.1.0
// @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
// @author       Felix_SANA
// @license     MIT
// @match        *://*/*
// @grant        GM_setValue
// @grant        GM_getValue
// @grant        GM_registerMenuCommand
// ==/UserScript==
(function() {
    'use strict';

    // 获取用户的语言设置，判断是否为中文
    const userLang = navigator.language || navigator.userLanguage;
    const isChinese = userLang.includes('zh');

    // 定义工具提示消息，根据语言选择显示中文或英文
    const messages = {
        newTab: isChinese ? "新标签页打开" : "New tab",
        currentTab: isChinese ? "当前页面覆盖" : "Current page"
    };

    // 创建左侧工具提示元素并添加到页面中
    const tooltipLeft = document.createElement("div");
    tooltipLeft.className = "link-tooltip-left";
    document.body.appendChild(tooltipLeft);

    // 创建右侧工具提示元素并添加到页面中
    const tooltipRight = document.createElement("div");
    tooltipRight.className = "link-tooltip-right";
    document.body.appendChild(tooltipRight);

    // 添加样式表，定义工具提示样式
    const style = document.createElement('style');
    style.textContent = `
        .link-tooltip-left, .link-tooltip-right {
            position: fixed;
            bottom: 30px;
            padding: 5px 10px;
            color: white;
            border-radius: 5px;
            font-size: 12px;
            display: none; /* 默认隐藏 */
            pointer-events: none; /* 禁止鼠标交互 */
            z-index: 1000; /* 确保显示在前面 */
        }
        .link-tooltip-left {
            left: 10px; /* 左下角位置 */
        }
        .link-tooltip-right {
            right: 10px; /* 右下角位置 */
        }
        .link-tooltip-left.new-tab, .link-tooltip-right.new-tab {
            background-color: blue; /* 新标签提示背景为蓝色 */
        }
        .link-tooltip-left.current-tab, .link-tooltip-right.current-tab {
            background-color: red; /* 当前标签提示背景为红色 */
        }
    `;
    document.head.appendChild(style);

    // 定义工具提示显示位置选项
    const positions = {
        left: 'left',
        right: 'right',
        both: 'both'
    };

    // 获取用户存储的工具提示位置设置，默认为左侧
    let userPosition = GM_getValue('tooltipPosition', 'left');
    updateTooltipVisibility(userPosition); // 初始化工具提示显示状态

    // 注册菜单命令以允许用户更改工具提示位置
    GM_registerMenuCommand(isChinese ? "左下角显示" : "Show on bottom left", () => {
        GM_setValue('tooltipPosition', 'left'); // 保存设置
        userPosition = 'left';
        updateTooltipVisibility(userPosition); // 更新工具提示显示状态
    });
    GM_registerMenuCommand(isChinese ? "右下角显示" : "Show on bottom right", () => {
        GM_setValue('tooltipPosition', 'right');
        userPosition = 'right';
        updateTooltipVisibility(userPosition);
    });
    GM_registerMenuCommand(isChinese ? "两边同时显示" : "Show on both sides", () => {
        GM_setValue('tooltipPosition', 'both');
        userPosition = 'both';
        updateTooltipVisibility(userPosition);
    });

    // 更新工具提示的显示状态
    function updateTooltipVisibility(position) {
        if (position === 'left') {
            tooltipLeft.style.display = "block"; // 显示左侧提示
            tooltipRight.style.display = "none"; // 隐藏右侧提示
        } else if (position === 'right') {
            tooltipLeft.style.display = "none";
            tooltipRight.style.display = "block";
        } else if (position === 'both') {
            tooltipLeft.style.display = "block";
            tooltipRight.style.display = "block";
        }
    }

    // 鼠标悬停事件监听器，显示对应的工具提示
    document.addEventListener("mouseover", function(event) {
        const link = event.target.closest("a"); // 检查鼠标是否悬停在链接上
        if (link) {
            const isNewTab = link.target === "_blank"; // 判断链接是否在新标签页打开
            const message = isNewTab ? messages.newTab : messages.currentTab;

            if (userPosition === 'left' || userPosition === 'both') {
                tooltipLeft.textContent = message;
                tooltipLeft.className = `link-tooltip-left ${isNewTab ? 'new-tab' : 'current-tab'}`;
                tooltipLeft.style.display = "block";
            }

            if (userPosition === 'right' || userPosition === 'both') {
                tooltipRight.textContent = message;
                tooltipRight.className = `link-tooltip-right ${isNewTab ? 'new-tab' : 'current-tab'}`;
                tooltipRight.style.display = "block";
            }
        } else {
            // 鼠标不在链接上时隐藏工具提示
            tooltipLeft.style.display = "none";
            tooltipRight.style.display = "none";
        }
    });

    // 鼠标移出链接时隐藏工具提示
    document.addEventListener("mouseout", function(event) {
        if (event.target.tagName === "A") {
            tooltipLeft.style.display = "none";
            tooltipRight.style.display = "none";
        }
    });
})();

betcom

沙发。顶一个

52pj01

沙发。顶一个

涛之雨

现在很多网站都是框架写的。。。
VUE，React，Angular之类的框架有可能会在js层绑定

enping1986

学习了，以后会用的到，网站的js脚本经常能看到吧

a7512482

学习了，以后会用的到

xiabo

我也来试试

Yhuo

沙发。顶一个

zhanghaixin110

我也试试

WXJYXLWMH

支持原创作品 谢谢分享