【发布时间】:2021-09-20 20:23:24
【问题描述】:
我试图弄清楚如何在选择文本时显示图标图像,就像谷歌翻译扩展程序是如何做到的那样。我在 Google 和 SO 上尝试了“图标图像出现”、“文本选择”和“谷歌翻译扩展”的各种组合,但都没有运气。对谷歌翻译如何做的一般描述(不需要代码!)会有很长的路要走,因为我不认为我用技术术语很好地描述了我想做的事情。
【问题讨论】:
标签: javascript browser-extension
我试图弄清楚如何在选择文本时显示图标图像,就像谷歌翻译扩展程序是如何做到的那样。我在 Google 和 SO 上尝试了“图标图像出现”、“文本选择”和“谷歌翻译扩展”的各种组合,但都没有运气。对谷歌翻译如何做的一般描述(不需要代码!)会有很长的路要走,因为我不认为我用技术术语很好地描述了我想做的事情。
【问题讨论】:
标签: javascript browser-extension
这需要针对特定需求的研究并尝试实施。你有没有尝试过?
我会检查/检测是通过 Javascript 选择的文本。在 CSS 中,我们有“::selection”属性来指示是否选择了文本。查找此内容或使用keyup, mouseup 事件设置图标图像的“display”和“position”属性。
Google 可能有自己的方式在其产品中实现这些目标,考虑到这是一项要求,我在上面为您提供了一种方法。
在您的浏览器中安装了 Google 翻译扩展程序,检查并检查您的开发人员工具 -> 来源 -> 内容脚本以探索扩展程序脚本。
Pretty-Print 查看可读代码。
【讨论】: