1

I'd like to know how colorZilla(the browser extension) does to get the color of every pixel within web pages. It even succeeded to get the color of a character within a TEXT_NODE.

Colorzilla picking the color of a character within the purple link a the bottom of the page

How does it know that the mouse pointer is hovering a TEXT_NODE with an ELEMENT_NODE?

I already tried the browser EyeDropper API but it doesn't work and always returns RGB(0,0,0). Maybe because it's still an experimental technology.

PS: I don't think colorZilla uses the EyeDropper API anyway.

Here are links to the extension for those who don't know it:

Gnopor
  • 587
  • 9
  • 16
  • Does this answer your question? [JavaScript eyedropper (tell color of pixel under mouse cursor)](https://stackoverflow.com/questions/1936021/javascript-eyedropper-tell-color-of-pixel-under-mouse-cursor) – Alireza Jul 15 '22 at 07:30
  • No, It doesn't. I updated my question to say why. – Gnopor Jul 15 '22 at 07:53
  • 2
    At least for Chrome they seem to call `chrome.tabs.captureVisibleTab`. – Kaiido Jul 15 '22 at 08:01

1 Answers1

5

ColorZilla has 2 pieces of code working together, ContentScript and BackgroundScript.

ContentScript has access to current page's DOM context. It can add event listeners, can create DOM element (the toolbar UI), and it can also talk to the BackgroundScript via message passing using Port.postMessage API.

BackgroundScript, on the other hand doesn't have access to page's DOM, but it can use special privileged API provided by Chrome for extensions. chrome.tabs.captureVisibleTab is the key here.

Upon color picking request, the BackgroundScript just captures the current page as image, and send the raw image data back to ContentScript via postMessage. Then ContentScript inject mousemove event listeners to the page, thus has your cursor position. Combining these 2 pieces of information, et voilà, now you can pick color at high precision.

If you're interested in finding out more details, go to this directory and look for 2 files:

# Extensions folder on macOS (don't know about Windows, sorry)
~/Library/Application Support/Google/Chrome/Default/Extensions/bhlhnicpbhignbdhedgjhgdocnmhomnp/2.0_0/js/

- content-script-combo.js  # ContentScript
- background.js            # BackgroundScript

Use prettier to format the code a bit, then search for keyword "take-screenshot", it should take you to the relevant part of code. From there on, have fun digging!

hackape
  • 18,643
  • 2
  • 29
  • 57