Javascript 如何通过扩展获取（未设置）Chrome中选定文本的背景色？

我看到了很多关于使用

：selection

选择器在Chrome和其他浏览器中设置所选文本的背景色的问题，但是我还没有找到任何关于获取用户操作系统上浏览器当前使用的颜色的讨论

对于Chrome扩展，我创建了一个伪输入元素，并希望使用与真实输入元素相同的前景色和背景色来设置该元素中“选定”文本的样式。所以我想知道Chrome中是否有一个扩展API，允许JavaScript查找浏览器当前使用的选定文本的颜色。考虑到平台、操作系统版本和桌面主题的不同组合，这些颜色可能会因用户而异，因此简单地硬编码两个值是不够的（尽管这是我目前正在做的）

一种方法可能是将带有选定文本的输入呈现到画布中，并对颜色进行采样，尽管我还没有研究是否可以通过扩展而不需要用户交互（API似乎向用户显示了一个对话框）获取本质上的屏幕截图。所以我希望有一个API来查找各种UI元素使用的颜色。只要访问浏览器的默认用户代理样式表就足够了

你可以用这个：

function elemPropVal(elem, prop){
  var r = getComputedStyle(elem) || elem.currentStyle;
  return r[prop];
}
console.log(elemPropVal(document.getElementById('someId'), 'backgroundColor'));

Rob W认为调用可以将当前选项卡的可见区域捕获到一个

dataUrl

，然后可以将其呈现到画布中。通过在已知位置插入一个

元素，将一些文本放入其中，聚焦元素，选择文本，然后进行屏幕捕获，您可以在画布上扫描元素的像素，并选择所选内容的前景色和背景色。有点笨拙，但应该行得通

---

缺点是此功能需要

权限，即使您的扩展只需要在一个域上工作。这也意味着，当扩展加载时，聚焦的输入字段将短暂闪烁，这可能会分散注意力。

这将返回

元素本身的背景色，而不是它内部的选定文本。我尝试了

getComputedStyle（getSelection（））

来获取选择本身的样式，但这并不奇怪。

currentStyle

仅是IE，而

getPropertyValue

采用CSS属性名，而不是camelCased属性名。而且，它没有告诉你真实的颜色，我想我知道你现在在寻找什么，这可能不会起作用。我认为您无法获得所选文本的突出显示颜色（如蓝色）。使用图形编辑器查找颜色。它可能是通用的，为什么不使用真正的

元素呢？您希望匹配默认UA样式，还是同时考虑当前页面上的样式表？您是否知道

getComputedStyle（节点“：：选择”）.getPropertyValue（'background-color'）？我不能使用真正的
，因为将焦点放在那里会导致页面隐藏扩展正在修改的元素。我正试图破解一些我无法直接控制的东西。匹配默认UA样式就足够了，因为我认为页面不会更改默认值。不，我不知道pseudo元素参数。在控制台中运行
getComputedStyle（$（“#搜索输入”）[0]，“：：选择”）[“背景色”]
以获取此页面上的搜索字段，它将返回透明的
“rgba（0，0，0，0）”
。获取
color
属性将返回
rgb（136136136）
，它似乎是未聚焦和未选择的颜色。我尝试将
：focus
添加到伪元素param中，但这并没有改变任何东西。您能否进一步解释一下要克隆的选择的结构、扩展的目的以及如何在文档中插入包装器元素？对你的问题的一般性回答可能很长而且不完美，但是如果你有一些额外的限制（例如“只有一个选定的元素”），那么使用不同的元素而不是输入如何解决焦点问题呢？如果原始元素是一个
字段，并且单击了新元素，那么旧元素就会失去焦点，对吗？