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();
dataTransfer.items.add(file);
const event = new DragEvent('drop', { dataTransfer });
document.body.dispatchEvent(event);
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: droptest.zip (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.