Chrome查词扩展开发：如何获取高亮选中文本时的光标位置

直接使用浏览器原生的 Selection + Range API 即可实现，不需要手动计算字符位置，兼容性覆盖所有主流Chromium内核浏览器（包括Chrome、Edge），完全满足Chrome扩展的开发需求。

核心实现代码 #

// 监听鼠标松开事件，触发选中检测
document.addEventListener('mouseup', () => {
  // 等一帧确保选区状态更新完成
  requestAnimationFrame(() => {
    const selection = window.getSelection();
    const selectedContent = selection.toString().trim();
    // 无有效选中文本时直接返回
    if (!selectedContent) return;

    const targetRange = selection.getRangeAt(0);
    // 获取选区所有行的位置矩形，取最后一个即为末尾字符所在位置
    const rects = targetRange.getClientRects();
    const lastCharRect = rects[rects.length - 1];

    // 转换为页面绝对坐标（叠加页面滚动偏移）
    const entryPosition = {
      left: lastCharRect.right + window.scrollX + 4, // 右移4px避免遮挡文字
      top: lastCharRect.bottom + window.scrollY + 4 // 下移4px避免遮挡文字
    };

    // 在此处调用你的悬浮入口渲染逻辑，传入entryPosition即可
    // renderLookupEntry(entryPosition.left, entryPosition.top)
  });
});

关键注意事项 #

• 不要使用range.getBoundingClientRect()获取位置：该方法返回的是整个选中区域的外接矩形，当用户选中跨多行的短语、整句时，外接矩形的右下角并不是最后一个字符的实际位置，会出现定位偏移。必须使用range.getClientRects()获取每一行的独立矩形，取列表最后一项才是准确的末尾字符位置。
• 自动兼容反向选中场景：用户选中文本时可能从末尾往开头拖拽选择，Range API会自动按照文本流顺序重置起止位置，不需要额外判断选中方向，取最后一个矩形的逻辑依然生效。
• 特殊场景适配：如果选中文本位于独立滚动容器、iframe内部，需要额外叠加对应容器的滚动偏移、以及iframe相对于顶层页面的位置偏移；普通静态页面场景下上述代码可以直接使用。
• 交互优化：拿到坐标后建议增加3-5px的位置偏移，避免悬浮查词入口直接遮挡选中的末尾文字，提升使用体验。

内容的提问来源于stack exchange，提问作者Trần Công Toản