Chrome扩展开发：如何用JS获取鼠标悬停的谷歌搜索结果块内链接

问题核心 #

谷歌搜索结果里的多数头部块级元素（如<div>、<h3>）本身不带href属性，但内部嵌套了<a>标签。你的代码仅检查触发事件的元素自身的href，所以悬停在这类块级元素上时无法获取到内部链接。

解决方案 #

通过向上遍历DOM树，从触发事件的元素开始，逐层查找父元素中第一个包含href属性的<a>标签，就能覆盖块级元素悬停的场景。

修改后的代码 #

document.addEventListener("mouseover", function(e) {
    // 清除之前的超时任务，避免重复输出
    if (hoverTimeout) clearTimeout(hoverTimeout);
    
    // 向上查找第一个带href的<a>标签
    let target = e.target;
    while (target && target.tagName !== 'A' && !target.href) {
        target = target.parentElement;
    }
    
    if (target && target.href) {
        const url = target.href;
        hoverTimeout = setTimeout(() => {
            console.log(url);
        }, 1000);
    }
});

关键说明 #

• 用e.target替代e.srcElement：e.target是标准DOM属性，兼容性更广泛。
• DOM向上遍历逻辑：从当前触发事件的元素开始，逐层向上查找，直到找到带href的<a>标签为止，覆盖块级元素嵌套链接的场景。
• 清除超时任务：避免鼠标快速切换悬停元素时，之前的超时任务仍执行输出，保证只记录最后一个悬停的URL。

额外优化点 #

• 限定监听范围：可以判断元素是否在谷歌搜索结果容器（如#search）内，减少不必要的DOM遍历。
• 配合mouseout事件：鼠标离开元素时清除超时，避免鼠标快速离开后仍输出URL。

内容的提问来源于stack exchange，提问作者Gertney