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

Question

I've seen lots of questions about setting the background color of selected text in Chrome and other browsers using the ::selection selector, but I haven't been able to find anything that discusses getting the color currently being used by the browser on the user's OS.

For a Chrome extension I've created a fake input element, and would like to style the "selected" text in that element with the same foreground and background colors as used in real input elements. So I'm wondering if there's an extension API in Chrome that lets JavaScript look up the colors currently being used by the browser for selected text. Given different combinations of platform, OS version and desktop theme, those colors may change from user to user, so simply hard-coding a couple of values isn't sufficient (though that's what I'm doing currently).

One approach might be to render an input with selected text into a canvas and sample the colors, though I haven't investigated whether taking what's essentially a screenshot is possible via an extension without user interaction (the desktopCapture API seems to show a dialog to the user). So I'm hoping there's an API for looking up the colors used by various UI elements. Simply getting access to the browser's default user agent style sheet would suffice.

Answer 1

Rob W points out that the chrome.tabs.captureVisibleTab call can capture the visible area of the current tab into a dataUrl , which could then be rendered into a canvas. By inserting an <input> element at a known location, putting some text into it, focusing the element, selecting the text and then doing the screen capture, you could scan the canvas for the element's pixels and pick out the selection's foreground and background colors. Bit kludgy, but it should work.

The drawback is that this feature requires the <all_urls> permission, even if your extension only needs to work on one domain. It would also mean that a focused input field would briefly flash when the extension loads, which could be distracting.

Answer 2

You could use this:

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