colorZilla 如何在网页上选择颜色？

Question

我想知道 colorZilla（浏览器扩展）如何获取网页中每个像素的颜色。它甚至成功地获取了TEXT_NODE中字符的颜色。

它如何知道鼠标指针悬停在带有ELEMENT_NODE 的TEXT_NODE上？

我已经尝试过浏览器 EyeDropper API，但它不起作用并且总是返回RGB(0,0,0). 也许是因为它仍然是一项实验技术。

PS：我认为 colorZilla 无论如何都不会使用 EyeDropper API。

对于那些不了解该扩展的人，以下是该扩展的链接：

• 火狐 ColorZilla 扩展
• Chrome ColorZilla 扩展程序

Answer 1

ColorZilla 有两段协同工作的代码：ContentScript和BackgroundScript。

\n

ContentScript可以访问当前页面的 DOM 上下文。它可以添加事件侦听器，可以创建 DOM 元素（工具栏 UI），还可以使用 API 通过消息传递与BackgroundScriptPort.postMessage对话。

\n

另一方面，BackgroundScript无法访问页面的 DOM，但它可以使用 Chrome 提供的特殊特权 API 进行扩展。chrome.tabs.captureVisibleTab是这里的关键。

\n

根据颜色选择请求，BackgroundScript仅将当前页面捕获为图像，并将原始图像数据通过 发送回ContentScriptpostMessage。然后ContentScript将事件侦听器注入mousemove到页面中，从而获得光标位置。结合这两条信息，等 voil\xc3\xa0，现在您可以高精度地选择颜色。

\n\n

如果您有兴趣了解更多详细信息，请转到此目录并查找 2 个文件：

\n

# Extensions folder on macOS (don't know about Windows, sorry)\n~/Library/Application Support/Google/Chrome/Default/Extensions/bhlhnicpbhignbdhedgjhgdocnmhomnp/2.0_0/js/\n\n- content-script-combo.js  # ContentScript\n- background.js            # BackgroundScript\n

\n

使用 prettier 稍微格式化一下代码，然后搜索关键字"take-screenshot"，它应该会带您到代码的相关部分。从那里开始，享受挖掘的乐趣！

\n