Simulating drop event doesn't work in Firefox add-on but works in Chrome extension?

TL;DR I’m trying to simulate a drop event with an add-on. event.dataTransfer.files is empty in a Firefox add-on while non-empty in Chrome extension with exact same code. The same code works w/o an add-on/extension.

I’m trying to simulate a file drop programmatically for my add-on. I’m doing this with a DragEvent and a DataTransfer object:

const dataTransfer = new DataTransfer();
const event = new DragEvent('drop', { dataTransfer });

This works fine when I try them in the browser (both Chrome and Firefox). See it live here. When you upload a file via the input, a drop is simulated and the image is shown.

The problem is when I try to do the same thing with an add-on. This test add-on: (1.7 KB) contains a basic content script that does exactly the same thing in the JSFiddle, except the add-on injects an input into a test document. You can test it with the included test.html.

With a Chrome extension, the content script injects the input, and it simulates a drop event. The image shows up fine in #preview just like in the JSFiddle. But on Firefox, nothing happens–no image is shown in #preview when I use a temporary add-on.

I’ve done some debugging and it seems that by the time the untrusted event dispatched by the add-on reaches the event handler on the HTML document, the dataTransfer.files list is empty on Firefox but not empty on Chrome.

Why is there a discrepancy in behavior? I tested my extension’s compatibility as well with Mozilla’s checker, and it was compatible. I’m not using any non-standard web APIs and the web implementations work fine.

The problem was due to Xray vision in Firefox – the DataTransfer object was not including the file when dispatched to the page script.

It was fixed by doing:

const dataTransfer = new window.wrappedJSObject.DataTransfer();