Search code examples
javascriptember.jsreflectiongoogle-chrome-extensionintrospection

Reflection/introspection on an Ember application to find instances of a specific model


First of all, I'm not looking to learn everything about Ember. I only want to use it on an existing Ember application to extract information about the application state.

I'm developing a Chrome extension to let users download "raw" Vine videos from the Vine website.

Vine is basically an Ember application. You can easily use the Ember Inspector extension to introspect the application and extract the video URLs manually from deep within the application state.

It seems like there is no reliable way to extract these URLs using only the DOM, because Vine uses "blob URLs". So what I'm thinking is I'll do something akin to whatever the Ember Introspector is doing, using reflection/introspection on the application.

How do I get access to the Ember application (and its state) from a content script?


Solution

  • Going by the comments, you are reasonably familiar with Chrome Extensions, and your question boils down to "how Ember Inspector works on a high level".

    Again, from the comments it's clear that Ember Inspector employs a technique that's sometimes called "injected scripts" or "page-level scripts".

    A content script can insert a <script> tag into the page, which will breach the isolated context that content scripts reside in, and will execute in a page's context. As such, you have access to all of Ember's "internals": you're in the same JS context now. You can look at this question for methods of injecting such scripts.

    The remaining question is how to communicate between the injected script and the content script, since the injected script doesn't have access to Chrome API anymore. This can be done, for instance, with custom events.