当突出显示文本时，Google 翻译扩展程序如何使其图标图像可见？

Question

我试图弄清楚如何在选择文本时显示图标图像，就像谷歌翻译扩展程序那样。 我在 Google 和 SO 上尝试了“图标图像显示”、“文本选择”和“Google 翻译扩展程序”的各种组合，但没有成功。 谷歌翻译如何做的一般描述（不需要代码！）会有很长的路要走，因为我认为我没有很好地用技术术语描述我想做的事情。

Answer 1

这将需要针对特定​​要求的研究和实施尝试。 你有没有尝试过什么？

我会检查/检测是通过 Javascript 选择的文本。 在 CSS 中，我们有“ ::selection ”属性来指示是否选择了文本。 寻找这个或使用keyup，mouseup事件设置图标图像的“显示”和“位置”属性。

谷歌可能有自己的方式在其产品中完成这些，考虑到这是一项要求，我已经给了你一种我会在上面采用的方法。

在浏览器中安装 Google 翻译扩展，检查并检查您的开发者工具 -> 来源 -> 内容脚本以探索扩展脚本。

Pretty-Print 查看可读代码。