1

I am building a Chrome extension which add extra functions to Trello.

The problem I am facing is that Trello somehow disabled the html5 drag and drop, so that when I drag some DOM (which I inject with my extension) with attribute draggable="true" the translucent representation of the draggable elements does not appear.

..

(Dragging the red box, which is <div draggable="true" style="..."></div> does not show the translucent image)

enter image description here

..

By inspecting the page with Chrome DevTool, I see there is a dragstart event listener set to the document.

enter image description here

..

If I remove the dragstart event listener (by clicking the "Remove" button next to it inside the DevTool's Event Listeners window) then the drag works correctly as shown in the screenshot below. (The red box on the right is the translucent representation created by the html5 drag mechanism).

enter image description here

..

So my question is: is there any way to override that dragstart event listener with a chrome extension for the elements that I intend to make draggable?

P.S. I am plaining to use react DnD eventually which is based on the html5 drag mechanism. And apparently, I am using react to build my extension :)

..

Edited: Here are the code from Trello where the dragstart event listener is attached.

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

The above code is placed within n(document).ready(function() { /* HERE */ } and n = e("jquery"). (Not 100% sure but seems that n is just jQuery.)

Since the event listener is attached anonymously, it is not possible to remove it afterwards (Correct me if I am wrong).

czphilip
  • 897
  • 1
  • 8
  • 18
  • 2
    I would try attaching a `dragstart` handler to document with `event.stopPropagation(); event.stopImmediatePropagation();` inside (this code should be inside a content script with `run_at: document_start`). Or maybe it's possible to hack into trello app similar to jQuery's `delete jQuery._data(document, "events").dragstart` – wOxxOm Jul 18 '16 at 10:21
  • Thanks @wOxxOm! The approach you suggest is similar to @Xan's answer so I replied my thoughts below as well :) – czphilip Jul 18 '16 at 15:33

1 Answers1

2

To begin with, a reminder: JavaScript defined in the page lives in a separate JS context from content scripts (the "isolated world" principle). Read up on that if unfamiliar.

With that in mind, you have two potential approaches:

  • You can be the fastest gun in the West and attach your listener first, before any of the page's code has a chance to execute, with a run_at: "document_start" content script. From there, you can cancel event propagation so that the page's listener won't receive it.

  • You can remove the listener yourself by injecting into the page context. How to remove it depends on how it was attached, of course.

Xan
  • 74,770
  • 16
  • 179
  • 206
  • Thanks @Xan for pointing out these approaches! The 2nd approach is not possible since the handler is attached anonymously (Correct me if I'm wrong). The 1st one sounds doable, but by doing that I am disabling the page's `dragstart` event listener globally across the page, right? This might break Trello in some way and I was hoping to just effect stuffs related to my extension. – czphilip Jul 18 '16 at 15:28
  • Could you add to the question how is the listener attached? – Xan Jul 18 '16 at 15:30
  • Ok! Just did. Another side question is that why the event listener I attached with extension's injected code does not show up in the DevTool's Event Listeners panel? My injected code is `runAt: 'document_end'` – czphilip Jul 19 '16 at 01:53
  • I tried the _be the fastest gun in the West_ approach with `stopImmediatePropagation()` and it worked as expected! Although it's not showing up in the devTool but it stop the event from propagating. Also, I am attaching it to the DOM that I intend to manipulate not the document so I think I am not messing up the Trello stuff. – czphilip Jul 19 '16 at 09:36