How does the Google Dictionary extension floating popup work?

161 views
Skip to first unread message

François Proulx

unread,
May 8, 2014, 12:11:57 AM5/8/14
to chromium-...@chromium.org
I've spent quite a bit of time looking at how the Google Dictionary  extension creates its floating popup, but I could not understand how it somehow magically manages to "hide" itself from the DOM / "Elements" tab in the DevTools. Also in the page context I can do a document.getElementById("gdx-bubble-host") while it's displayed, but innerHTML is blank!

WTF?

PhistucK

unread,
May 8, 2014, 12:16:28 AM5/8/14
to François Proulx, Chromium-extensions
It uses Shadow DOM, dude. :)
And it appends its main element to <body>.


PhistucK


On Thu, May 8, 2014 at 7:11 AM, François Proulx <francoi...@gmail.com> wrote:
I've spent quite a bit of time looking at how the Google Dictionary  extension creates its floating popup, but I could not understand how it somehow magically manages to "hide" itself from the DOM / "Elements" tab in the DevTools. Also in the page context I can do a document.getElementById("gdx-bubble-host") while it's displayed, but innerHTML is blank!

WTF?

--
You received this message because you are subscribed to the Google Groups "Chromium-extensions" group.
To unsubscribe from this group and stop receiving emails from it, send an email to chromium-extens...@chromium.org.
To post to this group, send email to chromium-...@chromium.org.
Visit this group at http://groups.google.com/a/chromium.org/group/chromium-extensions/.
To view this discussion on the web visit https://groups.google.com/a/chromium.org/d/msgid/chromium-extensions/e2ab5871-9d85-4d83-b5c6-f78cadab5a99%40chromium.org.
For more options, visit https://groups.google.com/a/chromium.org/d/optout.

Reply all
Reply to author
Forward
0 new messages