如何使用chrome扩展名覆盖拖动事件监听器（内容脚本）？

Question

我正在构建Chrome扩展程序，为Trello添加额外的功能。

我面临的问题是Trello以某种方式禁用了html5的拖放，所以当我拖动一些带有属性draggable="true"的DOM（我用我的扩展注入）时，可拖动元素的半透明表示不会出现。

...

（拖动红色框，<div draggable="true" style="..."></div>不显示半透明图像）

...

通过使用Chrome DevTool检查页面，我发现有一个dragstart事件监听器设置为document。

...

如果我删除了dragstart事件监听器（通过单击DevTool的“事件监听器”窗口中的“删除”按钮），则拖动工作正常，如下面的屏幕截图所示。 （右边的红色框是由html5拖动机制创建的半透明表示。）

...

所以我的问题是：是否有任何方法可以覆盖dragstart事件监听器，其中包含我想打算拖动的元素的chrome扩展名？

P.S。我最终想要使用基于html5拖动机制的react DnD。显然，我正在使用react来构建我的扩展：）

...

已编辑：以下是来自Trello的代码，其中附加了dragstart事件侦听器。

n(document).bind("dragstart", function(e) {
  return n(e.target).closest(".ui-draggable, .js-draggable").length > 0
}),

上述代码位于n(document).ready(function() { /* HERE */ }和n = e("jquery")之内。 （不是100％肯定，但似乎n只是jQuery。）

由于事件监听器是匿名附加的，因此之后无法将其删除（如果我错了，请纠正我）。

Answer 1

首先，提醒一下：页面中定义的JavaScript与内容脚本（＆＃34;孤立的世界＆＃34;原则）存在于一个单独的JS上下文中。 Read up on that如果不熟悉的话。

考虑到这一点，您有两种可能的方法：

• 你可以成为西方最快的枪，并在任何网页代码有机会执行之前，首先附加你的听众，{{1}内容脚本。从那里，您可以取消事件传播，以便该页面的听众不会收到它。

• 您可以injecting into the page context自行删除听众。当然，如何删除它取决于它的附加方式。