AGI｜Auto Hyperlink上线：鼠标点到哪，知识秒懂！- 大数跨境

首页

AGI｜Auto Hyperlink上线：鼠标点到哪，知识秒懂！

AI实践工程院

2025-07-08

导读：告别手动搜索！给电脑装上「一点就懂」的超能力！

Auto Hyperlink

在日常浏览网页时，你或许会见到一些智能超链接，点击即可自动识别关键词并跳转或发起搜索，大幅提升使用效率。

受此启发，笔者开发了一个文字附加超链功能应用，实现一键直达相关内容。本文将带你一起了解它的实现原理与应用方法。

作者

周立贤 | AI交付工程师

先当群众的小学生

Part1

案情介绍

本次分享介绍原创项目，它的功能是为页面中的文本添加超链接，以显示简介和快捷搜索。分享介绍了它的实现，并且记录改进建议。

这是项目 github 地址，请大家给我点亮 star⭐：
https://github.com/ANopony/auto-keyword-spot

以下是项目相关演示视频：

Part2

作案动机

在哔哩哔哩的评论区，点击偶尔出现的蓝色字体可以自己跳转搜索；在知乎的回答中，点击蓝色超链接也可以跳转搜索；在飞书中，点击带有虚线下划线的字体可以查看这个词的解释，并且可以点击搜索，点击时间有关的词还可以快捷创建日程。

哔哩哔哩：点击评论区的高亮字体跳转搜索

飞书：点击创建日程

飞书：点击查看解释

如果能在 AI 端侧应用中、在技术文档中，为部分生僻词汇/专业词汇添加一个超链接，点击显示一个简介和一个跳转百科的链接，那么会很方便我们熟悉一个未知的领域。

Part3

作案结果

1. 当前在一个基于 electron 的 AI 对话端侧应用上引用了该项目，展现出的效果如下。

引用前

引用后

点击超链接显示简介

点击“更多信息”跳转维基百科词条

2. 在一个基于 Node 的 Web 应用中引用该项目，展现出的效果如下

读取文件内容的 Web 应用

读取文本后

引用后

点击跳转维基百科

Part4

作案过程

1. Auto Hyperlink 工具的开发思路

把任务拆分成：

- 获取页面变化的文本内容

- 请求大模型为文本内容添加超链接

- 覆盖页面的文本内容

2. 应用引入工具

// 在 electron 引入
const AutoHyperlink = require("auto-keyword-spot");

document.addEventListener('DOMContentLoaded', () => {
    const autoLinker = new AutoHyperlink({
        definitionApiUrl: 'http://localhost:506/api/extract_keywords', // Your backend API URL
        debounceDelay: 700// Debounce delay in milliseconds
    });

    // Start observing changes in the document body or a specific container
    autoLinker.observe(document.getElementById('chat-container') || document.body);

    // For cleanup (optional, but good practice if app has a shutdown hook)
    window.addEventListener('beforeunload', () => {
        autoLinker.destroy();
    });
});

// 在 Node Web 应用引入
// ./public/app.js
const AutoHyperlink = require('auto-hyperlink');

document.addEventListener('DOMContentLoaded', () => { // 确保 DOM 完全加载后再执行
    const filePathInput = document.getElementById('filePathInput'); // 获取文件路径输入框
    const openFileBtn = document.getElementById('openFileBtn'); // 获取“打开”按钮
    const contentDisplay = document.getElementById('contentDisplay'); // 获取内容显示区域
    const loadingIndicator = document.getElementById('loadingIndicator'); // 获取加载指示器
    const errorDisplay = document.getElementById('errorDisplay'); // 获取错误显示区域
    /// ......existing code

    // 实例化 AutoHyperlink 工具
    const autoLinker = new AutoHyperlink({
        debounceDelay: 700// 防抖延迟，根据实际体验调整
    });

    // 观察文件内容显示区域
    // AutoHyperlink 会监听 `contentDisplay` 内部的 DOM 变化，并自动处理文本
    autoLinker.observe(contentDisplay);
    
    // ......existing code