如何使用 chrome 扩展名(内容脚本)覆盖拖动事件侦听器?

How to override drag event listener with chrome extension (content script)?

我正在构建一个 Chrome 扩展,它为 Trello 添加了额外的功能。

我面临的问题是 Trello 以某种方式禁用了 html5 拖放,所以当我拖动一些 DOM (我用我的扩展注入)属性 draggable="true" 不显示可拖动元素的半透明表示。

..

(拖动红框,即<div draggable="true" style="..."></div>不显示半透明图像)

..

通过使用 Chrome DevTool 检查页面,我看到 dragstart 事件侦听器设置为 document

..

如果我删除 dragstart 事件侦听器(通过在 DevTool 的事件侦听器 window 中单击它旁边的 "Remove" 按钮),则拖动将正常工作,如屏幕截图所示以下。 (右边的红框是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。)

由于事件侦听器是匿名附加的,因此之后无法将其删除(如果我错了请纠正我)。

首先,提醒一下:页面中定义的 JavaScript 位于与内容脚本不同的 JS 上下文中("isolated world" 原则)。 Read up on that如果不熟悉。

考虑到这一点,您有两种可能的方法:

  • 您可以成为西方最快的枪并在页面的任何代码有机会执行之前先附加您的监听器,使用run_at: "document_start" 内容脚本。从那里,您可以取消事件传播,这样页面的侦听器就不会收到它。

  • 您可以通过injecting into the page context自行删除侦听器。当然,如何删除它取决于它是如何附加的。