Я пытаюсь смоделировать событие перетаскивания (с помощью Drag and Drop API) в скрипте содержимого расширения браузера. По сути, я хочу смоделировать пользователя, удаляющего изображение программным способом. Пока у меня есть это:
const dataTransfer = new DataTransfer();
dataTransfer.items.add(file); // File object representing image being dropped
const event = new DragEvent('drop', { dataTransfer });
document.body.dispatchEvent(event);
Это прекрасно работает как в Chrome, так и в Firefox, когда все моделирование происходит в браузере. Этот JSFiddle прекрасно работает в обоих браузерах - если вы загружаете файл, имитируется капля, и изображение отображается в окне предварительного просмотра.
Проблема заключается в том, когда я пытаюсь выполнить то же самоевещь с расширением браузера, я сталкиваюсь с проблемами в Firefox (но не в Chrome). Я собрал демонстрационное расширение , которое выполняет то же самое, что и JSFiddle, но со скриптом содержимого. В Chrome расширение вводит данные из файла и отлично имитирует падение (изображение отображается в #preview
):
Вы можете видеть (в круге от руки) длина dataTransfer.files
равна 1 - файл удаленного изображения находится в списке. Но когда я использую то же самое расширение в Firefox:
Изображение было загружено (см. Входные данные), но оно не было отброшено и показано напредварительный просмотр. Из консоли вы можете увидеть, что dataTransfer.files
пуст в Firefox, даже если в dataTransfer.items
есть файл!
Почему здесь расхождение? Я проверил с помощью программы проверки совместимости Mozilla, которая сказала, что мое расширение готово кросс-платформенной. К тому времени спецификация HTML5 files
должна синхронизироваться с items
, и никакие условия AFAICT не гарантируют пустой список в Firefox. Может ли это быть ошибкой?