EyeDropper API: активация и приватность цвета

EyeDropper API позволяет человеку выбрать цвет в окне после явного действия. Это не фоновый поток пикселей, не профиль калибровки и не способ определить экран. Приложение получает шестнадцатеричное значение sRGB и должно различать отмену, отказ и отсутствие API. Управляемый контекст BotBrowser может выполнить разрешённую страницу, запустить EyeDropper из объявленного действия и записать видимый результат, когда runtime раскрывает API; BotBrowser не создаёт временную активацию, не читает пиксели без выбора, не калибрует экран и не обещает одинаковое системное окно на всех хостах. См. также управление цветом CSS и доступность экрана и события указателя и способы ввода.

TL;DR

• Вызывайте EyeDropper.open() прямо из действия, пока временная активация действительна.
• Проверьте безопасный контекст и конструктор, сохранив обычный ввод цвета при отсутствии API.
• Считайте sRGBHex значением приложения, а не измерением физического экрана.
• Используйте AbortController и различайте закрытие окна и выбор.
• Не храните снимки, координаты и историю дольше необходимого решения.

Contents

• Защитить выбор активацией пользователя
• Разделить выбор, отмену и резерв
• Ограничить выбранный цвет
• Проверить цикл ограниченным fixture
• Практический итог

Защитить выбор активацией пользователя

Предложение EyeDropper API описывает выбор цвета после намеренного вызова. Справочник MDN EyeDropper API описывает EyeDropper и open(). Нужны безопасный контекст и временная активация. Клик или клавиша должны владеть всем запросом.

Не вставляйте ожидание между действием и open(): запрос, рендеринг или callback могут поглотить активацию. Проверяйте конструктор и контекст; отсутствие означает недоступную способность, а не разрешение читать другую поверхность. Worker не наследует активацию страницы: страница открывает выбор, затем передаёт ему только цвет или отмену.

Рекомендации Chrome для EyeDropper показывают типовой поток, но не обещают API в каждом браузере. Используйте короткую запись:

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

phase описывает цикл, outcome видимый итог, а sequence отбрасывает поздний результат. Кнопке нужны доступное имя, клавиатура, фокус и видимый резерв.

Разделить выбор, отмену и резерв

После выбора open() возвращает sRGBHex. Закрытие, Escape, навигация и abort считаются нормальной отменой; различайте cancelled и rejected. Резервом служит <input type="color">, редактируемое hex-поле или палитра.

Итог	Запись	Видимое действие	Безопасный шаг
API отсутствует или контекст небезопасен	unavailable, fallback	Показать обычный ввод	Продолжить с резервом
Действие открыло выбор	open, pending	Показать статус и отмену	Ждать итог
Цвет выбран	selected, sRGBHex	Обновить образец и текст	Проверить и сохранить один раз
Человек закрыл или отменил	cancelled, прежнее значение	Сообщить, что цвет не изменён	Вернуться в idle без скрытого повтора
Runtime отклонил вызов	rejected	Объяснить недоступность	Оставить резерв без пикселей

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');
  }
}

Вызывайте функцию из обработчика действия, не из таймера или старого продолжения. Сохраняйте прежний цвет во время ожидания и показывайте локальную ошибку без повторного открытия.

Ограничить выбранный цвет

Цвет может происходить из закрытого документа или незапущенного проекта. Сохраняйте его только для нужной функции. API не отдаёт снимок: не просите screen capture, не заменяйте выбор canvas и не восстанавливайте раскладку по последовательности цветов.

sRGB подходит для темы или аннотации, но не измеряет яркость и не доказывает калибровку. Профили, HDR, zoom и CSS меняют вид. Страница владеет активацией; worker получает значение после выбора, а iframe получает минимум после проверки origin и схемы. BotBrowser сравнивает разрешённые видимые результаты, но не создаёт активацию и не калибрует экран.

BotBrowser поддерживает воспроизведение разрешённого сценария EyeDropper и запись видимого выбора или отмены, но не может создать временную активацию и не гарантирует одинаковое окно выбора на каждом хосте.

Проверить цикл ограниченным fixture

Используйте синтетическую страницу с кнопкой, обычным вводом, текстом и записью. Открывайте выбор внутри события, очищайте controller при уходе и не храните снимки или координаты.

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));
}

Случай	Ожидаемый итог	Что подтверждает	Что не подтверждает
Нет конструктора или безопасного контекста	unavailable, видимый резерв	Проверку способности и продолжение	Дефект экрана
Активация открывает выбор	pending до итога	Владение действием	Открытие таймером или worker
Человек выбирает цвет	selected, шесть цифр sRGBHex	Проверку и commit	Физическую калибровку
Закрытие или abort	cancelled, значение сохранено	Обратимую отмену	Тихий повтор
Runtime отклоняет	rejected, резерв работает	Отдельный отказ	Причину вне документированной границы

Записывайте только синтетические browserVersion, runtimePath, secureContext, outcome, valuePresent, fixtureId и sequence. Повторяйте после изменения браузера, экрана, политики или резерва и сравнивайте первое изменившееся поле.

Public sources

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

Практический итог

Открывайте EyeDropper из видимого действия, сохраняйте нативный или текстовый резерв и различайте выбор, отмену, отказ и отсутствие поддержки. Храните sRGBHex только для решения продукта, а не как доказательство экрана или личности. Повторяйте fixture после изменений и начинайте разбор с первого изменившегося состояния.