EyeDropper API : activation et confidentialité des couleurs

EyeDropper API permet à une personne de choisir une couleur dans la fenêtre après une action explicite. L’interaction ne fournit ni flux de pixels en arrière-plan, ni profil d’écran, ni moyen d’identifier un écran. L’application reçoit une valeur hexadécimale sRGB et doit rendre visibles annulation, refus et indisponibilité. Les contextes contrôlés de BotBrowser peuvent exécuter une page autorisée, lancer EyeDropper depuis une action déclarée et enregistrer les résultats visibles lorsque le runtime expose l’API ; BotBrowser ne peut pas fabriquer l’activation transitoire, lire des pixels sans interaction, calibrer un écran ni garantir le même sélecteur sur tous les hôtes. Voir aussi gestion des couleurs CSS et accessibilité d’affichage et événements de pointeur et modalités d’entrée.

TL;DR

• Appelez EyeDropper.open() directement depuis une action tant que l’activation transitoire est valide.
• Vérifiez le contexte sécurisé et le constructeur, puis gardez un contrôle couleur normal si l’API manque.
• Traitez sRGBHex comme une valeur applicative, jamais comme une mesure d’écran physique.
• Utilisez AbortController et distinguez fermeture du sélecteur et sélection.
• Ne conservez ni capture, ni coordonnées, ni historique plus longtemps que nécessaire.

Contents

• Garder l’activation pour le sélecteur
• Modéliser sélection, annulation et repli
• Protéger la couleur échantillonnée
• Vérifier le cycle avec un fixture borné
• Conclusion pratique

Garder l’activation pour le sélecteur

La proposition EyeDropper API décrit un sélecteur déclenché intentionnellement. La référence MDN EyeDropper API décrit EyeDropper et open(). L’API exige un contexte sécurisé et une activation transitoire. Le clic ou la commande clavier doit posséder toute la demande.

N’attendez pas une promesse entre l’action et open() : une requête, un rendu ou un callback peut consommer l’activation. Détectez le constructeur et le contexte sécurisé ; une absence est une capacité indisponible, pas une permission de lire une autre surface. Un worker ne reçoit pas l’activation de la page : la page ouvre le sélecteur puis lui transmet seulement la valeur ou l’annulation.

La présentation Chrome d’EyeDropper illustre un flux, sans garantir chaque navigateur ou webview. Utilisez un état court :

const pickerState = {
  phase: 'idle',
  outcome: 'unavailable',
  sequence: 0,
};

phase décrit le cycle, outcome le résultat visible et sequence écarte une promesse ancienne. Le contrôle doit avoir un nom accessible, le clavier, le focus et une solution visible pour les navigateurs sans API.

Modéliser sélection, annulation et repli

open() résout avec sRGBHex après sélection. Fermer, appuyer sur Escape, naviguer ou avorter sont des annulations normales ; distinguez cancelled de rejected. Le repli peut être <input type="color">, un champ hexadécimal ou une palette. Gardez le même format et la même validation.

Résultat	Enregistrement	Action visible	Étape sûre
API absente ou contexte non sécurisé	unavailable, fallback	Montrer le contrôle natif	Continuer avec le repli
Action ouvre le sélecteur	open, pending	Afficher état et annulation	Attendre le résultat
Couleur choisie	selected, sRGBHex	Mettre à jour valeur et nuancier	Valider et enregistrer une fois
Personne ferme ou avorte	cancelled, valeur précédente	Dire qu’aucun changement n’a eu lieu	Revenir à idle sans reprise cachée
Runtime refuse l’appel	rejected	Expliquer l’indisponibilité	Garder le repli sans pixel

async function chooseColor(button, fallback, signal) {
  if (!window.isSecureContext || !('EyeDropper' in window)) return fallback('unavailable');
  const picker = new EyeDropper();
  try {
    const result = await picker.open({ signal });
    return { outcome: 'selected', value: result.sRGBHex.toLowerCase() };
  } catch (error) {
    if (error?.name === 'AbortError') return fallback('cancelled');
    return fallback('rejected');
  }
}

Appelez cette fonction depuis l’action du bouton, jamais depuis un timer ou une continuation ancienne. Conservez la valeur précédente pendant l’attente et montrez une erreur locale sans rouvrir le sélecteur.

Protéger la couleur échantillonnée

Une couleur peut provenir d’un document privé ou d’un projet non publié. Gardez-la seulement pour la fonction utile. L’API ne livre pas de capture : ne demandez pas de capture d’écran, ne remplacez pas le sélecteur par un canvas et n’inférez pas la disposition d’une suite de couleurs.

La valeur sRGB convient à un thème ou une annotation, mais ne mesure ni luminance ni calibration. Profils, HDR, zoom et gestion CSS changent l’apparence. La page visible possède l’activation ; un worker reçoit la valeur après sélection, et une iframe reçoit le minimum avec origine et schéma validés. BotBrowser compare des résultats visibles autorisés, mais ne fabrique pas l’activation et ne calibre pas l’écran.

BotBrowser prend en charge la relecture d’un parcours autorisé EyeDropper et l’enregistrement de la sélection ou de l’annulation visibles ; il ne peut pas fabriquer l’activation transitoire ni garantir le même sélecteur sur chaque hôte.

Vérifier le cycle avec un fixture borné

Utilisez une page synthétique avec bouton, contrôle natif, texte et enregistrement. Le sélecteur s’ouvre dans l’événement, le contrôleur est nettoyé à la sortie et aucune capture n’est conservée.

const record = { phase: 'idle', outcome: 'unavailable', value: null, sequence: 0 };
const controller = new AbortController();
const button = document.querySelector('[data-pick-color]');

button.addEventListener('click', async () => {
  record.sequence += 1;
  record.phase = 'pending';
  try {
    if (!window.isSecureContext || !('EyeDropper' in window)) {
      record.outcome = 'unavailable';
      return showNativeColorControl();
    }
    const { sRGBHex } = await new EyeDropper().open({ signal: controller.signal });
    record.value = sRGBHex.toLowerCase();
    record.outcome = 'selected';
  } catch (error) {
    record.outcome = error?.name === 'AbortError' ? 'cancelled' : 'rejected';
  } finally {
    record.phase = 'idle';
  }
});

function disposePicker() {
  controller.abort();
  button.replaceWith(button.cloneNode(true));
}

Cas	Résultat attendu	Ce que cela prouve	Ce que cela ne prouve pas
Constructeur ou contexte absent	unavailable, repli visible	Détection et continuité	Défaut de l’écran
Activation ouvre le sélecteur	pending puis résultat	Propriété de l’action	Ouverture par timer ou worker
Personne choisit une couleur	selected, sRGBHex à six chiffres	Validation et commit	Calibration physique
Fermeture ou abort	cancelled, valeur conservée	Annulation réversible	Reprise silencieuse
Runtime refuse	rejected, repli utilisable	Séparation du refus	Cause hors limite documentée

Enregistrez seulement browserVersion, runtimePath, secureContext, outcome, valuePresent, fixtureId et sequence. Rejouez après un changement de navigateur, d’écran, de politique ou de repli et comparez le premier champ différent.

Public sources

• EyeDropper API proposal (WICG)
• MDN: EyeDropper API
• Chrome for Developers: EyeDropper API
• BotBrowser: Advanced features

Conclusion pratique

Ouvrez EyeDropper depuis une action visible, gardez un repli natif ou textuel et distinguez sélection, annulation, refus et indisponibilité. Conservez sRGBHex pour la décision produit, jamais comme preuve d’écran ou d’identité. Rejouez le fixture après chaque changement et partez du premier état visible modifié.