智能链接识别助手 - 开发笔记_识别链接-优快云博客

智能链接识别助手 - 开发笔记

📥 点击这里安装脚本

⭐ 如果你在使用过程中遇到任何问题或有改进建议，欢迎在评论区提出，我会及时回复并解决！

项目简介

智能链接识别助手是一个油猴脚本，用于快速识别选中文本中的URL链接并提供便捷的跳转功能。当用户选中包含URL的文本时，会在鼠标位置下方显示一个优雅的弹窗，点击即可在新标签页中打开链接。

完整代码

首先让我们看看完整的代码实现：

// ==UserScript==
// @name         智能链接识别助手
// @namespace    http://tampermonkey.net/
// @version      0.1
// @description  识别选中文本中的链接并提供快捷跳转
// @author       D0ublecl1ck
// @match        https://*/*/*
// @grant        none
// ==/UserScript==

(function() {
    'use strict';
    
    // 创建弹窗元素
    const popup = document.createElement('div');
    popup.id = 'url-popup';
    popup.style.cssText = `
        position: fixed;
        padding: 10px 20px;
        background: rgba(0, 0, 0, 0.9);
        color: white;
        border-radius: 5px;
        font-size: 14px;
        z-index: 2147483647;
        display: none;
        cursor: pointer;
        box-shadow: 0 2px 5px rgba(0,0,0,0.2);
        pointer-events: auto;
        user-select: none;
        min-width: 200px;
    `;
    document.body.appendChild(popup);

    // URL正则表达式
    const urlRegex = /(?:https?:\/\/)?(?:www\.)?[-a-zA-Z0-9@:%._+~#=]{1,256}\.[a-zA-Z0-9()]{1,6}\b(?:[-a-zA-Z0-9()@:%_+.~#?&/=]*)/gi;

    // 点击处理函数
    let popupClickHandler = null;

    // 监听选中事件
    document.addEventListener('mouseup', function(e) {
        if (popup.contains(e.target)) return;

        const selectedText = window.getSelection().toString().trim();
        if (!selectedText) {
            popup.style.display = 'none';
            return;
        }

        const matches = selectedText.match(urlRegex);
        if (matches && matches.length > 0) {
            const urlList = matches.map(url => {
                if (!url.match(/^https?:\/\//i)) {
                    url = 'https://' + url;
                }
                return url;
            });

            popup.innerHTML = urlList.map((url, index) => 
                `<div class="popup-item" data-url="${url}" style="margin: 5px 0; padding: 5px; border-bottom: ${index < urlList.length-1 ? '1px solid rgba(255,255,255,0.2)' : 'none'}">
                    ${index + 1}. 点击跳转到: ${url}
                </div>`
            ).join('');

            popup.style.display = 'block';
            const x = Math.min(e.clientX, window.innerWidth - popup.offsetWidth - 20);
            const y = e.clientY + 100;
            popup.style.left = Math.max(10, x) + 'px';
            popup.style.top = y + 'px';

            if (popupClickHandler) {
                popup.removeEventListener('click', popupClickHandler);
            }

            popupClickHandler = function(e) {
                const item = e.target.closest('.popup-item');
                if (item) {
                    const url = item.dataset.url;
                    if (url) {
                        popup.style.display = 'none';
                        window.open(url, '_blank');
                    }
                }
            };

            popup.addEventListener('click', popupClickHandler);
        } else {
            popup.style.display = 'none';
        }
    });

    document.addEventListener('mousedown', function(e) {
        if (!popup.contains(e.target)) {
            popup.style.display = 'none';
        }
    });

    const style = document.createElement('style');
    style.textContent = `
        #url-popup {
            font-family: Arial, sans-serif;
        }
        #url-popup .popup-item:hover {
            background: rgba(255, 255, 255, 0.1);
        }
    `;
    document.head.appendChild(style);
})();

代码详解

1. 初始化设置

const popup = document.createElement('div');
popup.id = 'url-popup';

创建一个弹窗元素，设置唯一ID便于样式控制。

2. 样式设计

popup.style.cssText = `
    position: fixed;
    background: rgba(0, 0, 0, 0.9);
    // ...
`;

使用CSS-in-JS方式设置样式，确保弹窗样式不受页面影响。

3. URL识别核心

const urlRegex = /(?:https?:\/\/)?(?:www\.)?[-a-zA-Z0-9@:%._+~#=]{1,256}\.[a-zA-Z0-9()]{1,6}\b(?:[-a-zA-Z0-9()@:%_+.~#?&/=]*)/gi;

这个正则表达式是整个脚本的核心，它可以：

匹配http/https链接
匹配www开头的链接
匹配普通域名
支持各种URL参数

4. 事件处理

document.addEventListener('mouseup', function(e) {
    // 选中文本处理
});

document.addEventListener('mousedown', function(e) {
    // 关闭弹窗处理
});

使用事件委托模式处理所有事件，提高性能。

5. 位置计算

const x = Math.min(e.clientX, window.innerWidth - popup.offsetWidth - 20);
const y = e.clientY + 100;

智能计算弹窗位置，确保始终在视口内可见。

使用建议

选中文本时尽量完整选中链接
如果弹窗位置不合适，可以重新选中文本
点击页面任意位置可以关闭弹窗

已知问题

某些特殊格式的URL可能无法识别
在某些网站可能出现样式冲突
暂不支持快捷键操作

参与改进

如果你发现了bug或有新功能建议，欢迎：

在评论区提出
私信反馈

未来计划

添加配置面板
支持更多URL格式
添加快捷键支持
优化弹窗样式

💡 你的每一个建议都是改进的动力！如果在使用过程中遇到任何问题，或者有任何改进意见，请一定要在评论区告诉我。我会认真阅读每一条评论，并及时做出改进。让我们一起把这个工具变得更好！