Javascript 模拟drop事件在Chrome扩展中有效，但在Firefox插件中无效？

我试图在浏览器扩展的内容脚本中模拟拖放事件（使用拖放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上都非常有效。在这两种浏览器中都能很好地工作——如果你上传一个文件，就会模拟一次拖放，并且图像会显示在预览中

问题是，当我试图用浏览器扩展完成完全相同的事情时，我在Firefox（但不是Chrome）中遇到了问题。我已经编写了一个脚本，它完成了与JSFIDLE相同的任务，但是有一个内容脚本。在Chrome上，扩展插件插入文件输入并完美模拟拖放（图像显示在

#preview

中）：

您可以看到（在徒手圆圈中）

dataTransfer.files

的长度为1–删除的图像文件在列表中。但当我在Firefox上使用完全相同的扩展时：

图像已上载（请参见输入），但未被删除并显示在预览中。从控制台中，您可以看到Firefox中的

dataTransfer.files

是空的，即使

dataTransfer.items

中有该文件

为什么这里有差异？我向Mozilla的兼容性检查器进行了检查，它说我的扩展已经准备好跨平台了<代码>文件应该与

项目

同步，并且任何条件都不能保证Firefox上的列表为空。这可能是一个bug吗？

多亏了，这个问题是由于Firefox的策略将内容脚本和页面脚本（包括

文件

）的全局对象分开了。通过展开页面的

DataTransfer

对象而不是内容脚本，我能够模拟放置：

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

---

这可能是一个bug，但了解Firefox，我想这是因为它们仍然提供了历史上的上下文分离。@wOxxOm感谢链接。我读了一些关于wrappedJSObject的书，并尝试了

newwindow.DataTransfer

和

newwindow.DragEvent

，但运气不好。虽然X射线会搞乱一个特定的文件实例，这似乎很奇怪。

window

仍然指内容脚本的窗口，但您需要

window.wrappedJSObject

在这里，我认为或者显式地使用cloneInto。至于“奇怪”，因为内容脚本在一个孤立的世界中运行，我认为它们不共享复杂类型是可以理解的，因为很可能很难改变历史上实现分离的方式。@wOxxOm你完全正确！该文件最终出现在

数据传输

对象中，现在可以发送它了！非常感谢你——如果你能把它作为一个答案贴出来，那就太好了。