How To Get (not Set) The Background Color Of Selected Text In Chrome Via An Extension?

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 anythin

Solution 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.

Solution 2:

You could use this:

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