1

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?

damd
  • 6,116
  • 7
  • 48
  • 77
  • Get started: https://developer.chrome.com/extensions/getstarted – Marc Guiselin Feb 02 '16 at 19:26
  • @MarcGuiselin: I know how to create a Chrome extension. What I'm asking is about Ember and how to introspect the application state "from the outside" so to speak. – damd Feb 02 '16 at 19:27
  • great. since your extension content script cannot access ember.js, your content script would insert a script into the page that triggers the download of the video when your content script receives a message from the background page when the browseraction button is pressed. You could have the background page hide or show the button if you are on a valid vine website using chrome.browserAction.enable(). – Marc Guiselin Feb 02 '16 at 19:34
  • @MarcGuiselin: My extension won't have a browser/page action. I will basically scan every Vine document for specific elements and then add download buttons as `a` elements with a `download` attribute. I have already published a Facebook video downloading extension which works like that. The big difference is that Vine uses "blob URLs" instead of explicit mp4/webm sources, so it's much more difficult to extract the "real" URLs of the videos. EDIT: I edited my question to clarify. – damd Feb 02 '16 at 19:40
  • Ember inspector injects a script into the page, that will query the application on behalf of the inspector, communicating with the inspector through [window messages](https://developer.mozilla.org/en-US/docs/Web/API/Window/postMessage). As it's open source, your best bet is probably to dig into [its code](https://github.com/emberjs/ember-inspector) to see how it's done. – spectras Feb 03 '16 at 02:06

1 Answers1

0

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.

Community
  • 1
  • 1
Xan
  • 74,770
  • 16
  • 179
  • 206
  • Thanks for your reply, I will try to see what I can extract from Ember using this method. – damd Feb 04 '16 at 11:39