0
314
Vistas¿Cómo logra colorZilla elegir el color en las páginas web?
Me gustaría saber cómo colorZilla (la extensión del navegador) obtiene el color de cada píxel dentro de las páginas web. Incluso logró obtener el color de un carácter dentro de un TEXT_NODE .
¿Cómo sabe que el puntero del mouse está sobre un TEXT_NODE con un ELEMENT_NODE ?
Ya probé la API EyeDropper del navegador, pero no funciona y siempre devuelve RGB(0,0,0) . Tal vez porque todavía es una tecnología experimental .
PD: No creo que colorZilla use la API EyeDropper de todos modos.
Aquí hay enlaces a la extensión para aquellos que no la conocen:
1 Respuestas
Responde la pregunta0
ColorZilla tiene 2 piezas de código que funcionan juntas, ContentScript y BackgroundScript .
ContentScript tiene acceso al contexto DOM de la página actual. Puede agregar detectores de eventos, puede crear un elemento DOM (la interfaz de usuario de la barra de herramientas) y también puede comunicarse con el BackgroundScript a través del paso de mensajes mediante la API Port.postMessage .
BackgroundScript , por otro lado, no tiene acceso al DOM de la página, pero puede usar una API privilegiada especial proporcionada por Chrome para las extensiones. chrome.tabs.captureVisibleTab es la clave aquí.
Tras la solicitud de selección de color, BackgroundScript simplemente captura la página actual como imagen y envía los datos de la imagen sin procesar a ContentScript a través de postMessage . Luego, ContentScript inyecta detectores de eventos mousemove en la página, por lo tanto, tiene la posición del cursor. Combinando estas 2 piezas de información, et voilà, ahora puede elegir el color con alta precisión.
Si está interesado en obtener más detalles, vaya a este directorio y busque 2 archivos:
# 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 para formatear un poco el código, luego busque la palabra clave "take-screenshot" , debería llevarlo a la parte relevante del código. A partir de ahí, ¡diviértete cavando!