Chrome扩展开发：是否可以检测页面元素的页面位置？

你找到的viewport可见性检测方案不适合直接用来实现需求。这类方案的作用是判断元素是否处于当前用户可视窗口范围内，如果你直接基于可视窗口高度做上中下分区，会出现同一个链接随用户页面滚动被判定到不同区域的问题，结果完全不可靠。

正确实现逻辑 #

你要的「判断链接在页面顶部/中部/底部」是基于整个文档的绝对位置判断，和当前视口展示哪部分内容无关，按以下步骤实现即可：

• 第一步：匹配目标链接
  遍历页面所有带href属性的<a>标签，对链接做归一化处理后和目标地址比对。注意不要直接硬比对字符串，要处理相对路径、URL参数、锚点差异，避免漏判、错判。
• 第二步：划分页面区域
  取整个HTML文档的总滚动高度，直接三等分即可得到三个区域的分界点：
  • 顶部区域：文档顶部偏移量 0 至 总高度/3
  • 中部区域：文档顶部偏移量 总高度/3 至 2*总高度/3
  • 底部区域：文档顶部偏移量 2*总高度/3 至 总高度
• 第三步：计算链接位置并匹配区域
  对匹配到的链接元素调用getBoundingClientRect()方法，结合当前页面滚动距离换算出元素相对于整个文档顶部的偏移量，和三个区域的范围做比对，就能得到准确的区域判定结果。

可直接复用的实现代码 #

// 链接匹配（自动处理路径格式差异）
function isTargetLink(anchorEl, targetUrl) {
  try {
    const current = new URL(anchorEl.href, window.location.origin)
    const target = new URL(targetUrl)
    // 可根据需求调整比对规则，比如是否要求参数、锚点完全一致
    return current.origin === target.origin && current.pathname === target.pathname
  } catch (err) {
    return false
  }
}

// 判定元素所属页面区域
function getElementArea(anchorEl) {
  const docTotalHeight = document.documentElement.scrollHeight
  const elementOffsetTop = anchorEl.getBoundingClientRect().top + window.scrollY
  const firstSplit = docTotalHeight / 3
  const secondSplit = firstSplit * 2

  if (elementOffsetTop < firstSplit) return 'top'
  if (elementOffsetTop < secondSplit) return 'middle'
  return 'bottom'
}

// 扫描页面所有目标链接
function findTargetLinks(targetUrl) {
  const allAnchors = document.querySelectorAll('a[href]')
  return Array.from(allAnchors)
    .filter(el => isTargetLink(el, targetUrl))
    .map(el => ({
      dom: el,
      area: getElementArea(el)
    }))
}

补充说明 #

如果你后续需要加「仅统计用户实际可见的目标链接」这类过滤规则，可以再叠加viewport可见性判断逻辑做筛选，但核心的区域判定逻辑一定要基于整个文档的总高度计算，不要基于视口高度计算。

针对动态渲染、懒加载的页面，建议在DOM稳定后再执行扫描，也可以添加MutationObserver监听DOM变动，做增量检测避免漏掉后续加载出来的链接。

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