Search code examples
javascriptcolorscolor-picker

How does colorZilla manage to pick color on webpages?

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:

Solution

  • 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!