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

【问题标题】：How to override drag event listener with chrome extension (content script)?如何使用 chrome 扩展（内容脚本）覆盖拖动事件侦听器？
【发布时间】：2016-07-18 10:16:05
【问题描述】：

我正在构建一个向 Trello 添加额外功能的 Chrome 扩展程序。

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

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

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

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

所以我的问题是：有什么方法可以覆盖 dragstart 事件侦听器，并为我打算使其可拖动的元素添加 chrome 扩展名？

附：我很想最终使用基于 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。）

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

【问题讨论】：

我会尝试将dragstart 处理程序附加到内部带有event.stopPropagation(); event.stopImmediatePropagation(); 的文档（此代码应该在带有run_at: document_start 的内容脚本中）。或者也许可以侵入类似于 jQuery 的 delete jQuery._data(document, "events").dragstart 的 trello 应用程序@
感谢@wOxxOm！您建议的方法类似于@Xan 的回答，所以我也在下面回复了我的想法:)

标签： reactjs google-chrome-extension drag-and-drop content-script trello

【解决方案1】：

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

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

您可以成为西部最快的枪，并在任何页面代码有机会执行之前先附加您的侦听器，并使用run_at: "document_start" 内容脚本。从那里，您可以取消事件传播，以便页面的侦听器不会收到它。
您可以通过injecting into the page context 自行删除监听器。当然，如何移除它取决于它是如何连接的。

【讨论】：

感谢@Xan 指出这些方法！第二种方法是不可能的，因为处理程序是匿名附加的（如果我错了，请纠正我）。第一个听起来可行，但这样做我会在整个页面上全局禁用页面的 dragstart 事件侦听器，对吗？这可能会以某种方式破坏 Trello，我希望只影响与我的扩展相关的内容。
你能补充一下这个监听器是如何连接的吗？
好的！刚刚做了。另一个问题是为什么我附加的扩展注入代码的事件侦听器没有显示在 DevTool 的事件侦听器面板中？我注入的代码是runAt: 'document_end'
我用stopImmediatePropagation() 尝试了成为西方最快的枪方法，它按预期工作！虽然它没有出现在 devTool 中，但它阻止了事件的传播。另外，我将它附加到我打算操作而不是文档的 DOM 上，所以我认为我没有弄乱 Trello 的东西。