谷歌翻译扩展程序如何实现选中文本时显示自身图标？

实现原理解析 #

谷歌翻译扩展的选中文本弹出悬浮图标功能，核心依赖浏览器原生DOM能力实现，整体逻辑可以拆解为以下几步：

• 首先扩展会向所有打开的页面注入全局的事件监听脚本，绑定浏览器原生的selectionchange事件，该事件会在用户调整页面文本选中状态时自动触发。
• 事件触发后先做有效性校验：判断当前选中的文本长度是否大于0、是否是你需要响应的场景（比如可以过滤掉富文本编辑器、输入框内的选中文本）、当前是否已经存在弹出的图标避免重复渲染。
• 校验通过后，调用getBoundingClientRect API获取当前选中文本区域的边界坐标，结合当前页面的滚动偏移量，计算出悬浮图标需要放置的绝对定位坐标，通常会选择选中文本区域的右上角位置作为图标展示位。
• 把预先定义好样式的图标元素插入到页面DOM中，设置好计算出来的坐标即可正常展示。
• 最后补充边界处理逻辑：监听页面点击事件、选中取消事件，在用户取消选中文本或者点击页面其他位置时，销毁已经弹出的图标即可。

你之前搜索不到结果主要是关键词不够精准，后续检索相关资料可以换成「浏览器扩展 selectionchange 悬浮图标」「文本选中弹出按钮」这类关键词，更容易匹配到对应的实现方案。

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