Перетаскивание ошибок API/странное поведение в Firefox и Chrome ⇐ Html

[Anonymous]

Я хочу создать приложение, в котором вы можете использовать перетаскивание для переноса некоторых коротких строковых данных из одного окна браузера в другое (где любое окно может быть всплывающим окном). Код в примере написан на HTML и TypeScript и входит в состав WebPack.
В конце у нас есть:

Код: Выделить всё

Drop here.

Код: Выделить всё

const popupWindow = window.open("link-to-above-html-file", "popup")!
popupWindow.querySelector(".drop-zone")!.addEventListener("drop", async (e) => {
e.preventDefault();
(e as DragEvent).dataTransfer!.dropEffect = "copy";
console.log("DropEvent");
console.log(e);
console.log(e instanceof DragEvent);
console.log(e.constructor);
console.log(DragEvent);
console.log(DragEvent == e.constructor);
});
popupWindow.querySelector(".drop-zone")!.addEventListener("dragover", async (e) => {
e.preventDefault();
(e as DragEvent).dataTransfer!.dropEffect = "copy"; //not sure if this is needed, but the default here is "none" which some other people have mentioned can result in an empty DataTransfer object
});

На конце перетаскивания у нас есть:

Код: Выделить всё

Drag me.

(...)


function onDrag(e){
e.dataTransfer.items.add("some data", "text/plain")
}

Теперь, если мы протестируем это в Chrome (в Linux, не уверен, что результат будет таким же в других версиях), перетаскивая из обычного окна в отдельное всплывающее окно (где прослушиватель событий для «drop» и «dragover» определен в другом окне, которое сгенерировало всплывающее окно, как в примере выше), мы не получим никаких ошибок, но заметим кое-что особенное. Вывод консоли Chrome

Полученное событие - это DragEvent, но конструктор во всплывающем окне - это другой DragEvent, чем тот, который у нас есть в окне, которое сгенерировало всплывающее окно.

Объект DataTransfer и элементы внутри него по-прежнему доступны, поэтому это не так уж и сложно, но проектирование вокруг него будет раздражать.
Но если мы протестируем это в Firefox (Linux, в частности версия пакета apt 140.6.0esr-1~deb12u1, которая на данный момент является последней стабильной версией) мы столкнулись с ошибкой, о которой было сообщено и подтверждено 8 лет назад, которая не была исправлена и не устранялась в течение 2 лет: объект DataTransfer имеет значение null. отчет об bugzilla
Мне очень хочется, чтобы это приложение работало в обоих браузерах.
Есть ли способ заставить элементы передавать простую короткую строку другому элементу в другом (надеюсь, всплывающем) окне, аналогично перетаскиванию? И да, я знаю, что могу просто предоставить строковые данные пользователю, и он сможет вручную скопировать и вставить их во входные данные , но мне бы очень хотелось, чтобы строковые данные не были полностью прозрачными (это нормально, если они хотят их видеть, но они не должны должны это делать).

И небольшой подвопрос: есть ли какой-нибудь способ обойти Chrome, переопределяя все конструкторы классов в всплывающее окно?

Подробнее здесь: https://stackoverflow.com/questions/798 ... and-chrome