如何通过扩展程序获取（未设置）Chrome中选定文本的背景颜色？ [英] How to get (not set) the background color of selected text in Chrome via an extension?

问题描述

在Chrome和其他使用 :: selection 选择器的浏览器中，我发现很多有关设置 背景颜色的问题，但是我一直无法找到任何讨论在用户的操作系统上获取浏览器当前正在使用的颜色的内容。

对于Chrome扩展程序，我创建了一个假输入元素，并且想要使用与所使用的前景和背景颜色相同的元素对该元素中的selected文本进行样式设置在实际的输入元素中。所以我想知道是否在Chrome中有一个扩展API，它允许JavaScript查找当前浏览器对选定文本使用的颜色。鉴于平台，操作系统版本和桌面主题的不同组合，这些颜色可能会因用户而异，因此仅对两个值进行硬编码是不够的（尽管这正是我目前所做的）。

一种方法可能是将选定文本的输入渲染到画布中并对颜色进行采样，但我尚未调查是否可以通过无需用户交互的扩展（ desktopCapture API似乎向用户显示一个对话框）。所以我希望有一个用于查找各种UI元素使用的颜色的API。只需访问浏览器的默认用户代理样式表就足够了。

不设置背景颜色的选择文本在Chrome浏览器通过扩展noredirect = 1＃comment43437734_27454211>指出， dataUrl 中，然后可以将其显示为画布。通过在已知位置插入< input> 元素，将一些文本放入它中，聚焦元素，选择文本，然后执行屏幕截图，可以扫描为元素的像素绘制画布，并挑选出选区的前景和背景颜色。位kludgy，但它应该工作。

缺点是这个功能需要< all_urls> 权限，即使你的扩展只需要工作在一个域上。这也意味着当扩展程序加载时，重点输入字段会短暂闪烁，这可能会让人分心。

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.

解决方案

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.

这篇关于如何通过扩展程序获取（未设置）Chrome中选定文本的背景颜色？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！