告别标签页反复横跳，用用户脚本把 Hacker News 评论区缝合到正文侧边

在浏览 Hacker News (HN) 的过程中，最令人抓狂的体验莫过于那种“撕裂感”。HN 的核心价值其实不在于文章本身，而在于评论区那些硬核的开发者讨论。但原生的跳转逻辑非常割裂：你点击链接进入文章页阅读，想看看大家的观点时，必须切换回之前的标签页；看完评论想回正文确认细节，又要切回来。这种在两个 Tab 之间反复横跳的操作，不仅打断了深度阅读的心流，更是效率杀手。

为了彻底解决这个痛点，我尝试用一个轻量级的用户脚本（Userscript）将文章内容与讨论区“缝合”在一起。其核心逻辑是通过拦截跳转行为，在目标文章页直接注入一个可调节大小的侧边面板，将对应的 HN 讨论帖以 iframe 形式加载在右侧。这样在阅读正文的同时，评论区就实时呈现在视野内，完全消除了切换窗口的动作。

在实操过程中，我重点优化了两个关键的功能细节，以确保它不仅仅是一个简单的弹窗。

首先是“自动关联”机制。脚本会通过 document.referrer 监测来源，只要判定你是从 news.ycombinator.com 跳转而来的，侧边栏就会在文章页加载完成时自动弹出。为了防止遮挡正文，我为面板添加了可拖拽的宽度调整功能，用户可以根据屏幕分辨率手动拉伸面板宽度，确保阅读体验不受影响。

其次是针对直接访问链接的“反向检索”逻辑。很多时候我们会通过搜索引擎或社交媒体直接进入一个被 HN 分享过的网页，此时由于没有 Referrer 记录，侧边栏不会自动弹出。为此我写了一个检测函数，在页面加载时自动将当前 URL 发送到 HN 的检索接口。如果该 URL 存在对应的讨论帖，页面右上角会静默出现一个触发按钮，点击即可唤起讨论面板，实现了从正文到讨论区的反向链接。

对于习惯折腾浏览器的开发者来说，这种基于 Userscript 的改造方案比开发一个完整的 Chrome Extension 要轻量得多。它不需要处理复杂的 Manifest 权限申请，也不需要安装繁琐的打包流程，响应速度极快。如果你想自定义面板的视觉风格，比如修改默认宽度或背景色，直接在脚本顶部的 CSS 变量中修改即可。

从技术实现角度看，这个工具的部署逻辑其实就是一段 JavaScript，通过 DOM 注入和 iframe 嵌入来实现。为了让大家直观感受，我梳理了其核心的伪代码逻辑：

// 核心逻辑：检测URL并注入iframe侧边栏
if (window.location.href.includes('target_article')) {
    const sidePanel = document.createElement('div');
    // 使用 fixed 定位确保面板覆盖全屏高度，z-index 设为 9999 防止被页面元素遮挡
    sidePanel.style.cssText = 'position:fixed; right:0; top:0; width:300px; height:100%; z-index:9999; overflow:auto;';
    // 通过动态拼接 threadId 构造 HN 讨论页的 URL
    sidePanel.innerHTML = `<iframe src="https://news.ycombinator.com/item?id=${threadId}" style="width:100%; height:100%; border:none;"></iframe>`;
    document.body.appendChild(sidePanel);
}

在这种工作流下，阅读 HN 变成了一种“双轨并行”的体验：左侧是深度内容，右侧是实时碰撞的观点。这种对网页交互逻辑的微小改造，往往能给日常的生产力带来质的提升。