Implement sandboxed iframes support / ember-twiddle support

[jbescoyez]

I'm currently developing a Chrome extension that runs an Ember app in an iframe. So far, I'm unable to inspect it.

This behavior can be easily reproduced on ember-twiddle:

• Go to https://ember-twiddle.com/
• Try inspecting the "output" iframe

Current behavior:

• The iframe does not appear in the dropdown.

Expected behavior:

• The iframe would be selectable in the dropdown and the ember app would be inspectable

Related to: https://github.com/ember-cli/ember-twiddle/issues/49

[Gaurav0]

I've tried to work around this from Ember Twiddle side, couldn't find a workaround. Ember Inspector needs to be able to handle dynamically added and removed iframes with Ember apps in order to support Ember Twiddle.

[RobbieTheWagner]

@jbescoyez is the iframe sandboxed? If it is not I have a potential solution you could try out in a PR https://github.com/emberjs/ember-inspector/pull/872

The issue with ember-twiddle seems to be that it is impossible to inject scripts into the sandboxed iframe by design, unless you have permissions to its origin. Its origin is "null" though and therefore we cannot even attempt to get permissions.

Is your Ember app viewable somewhere? I would love to see the case of a site with dynamically added iframes, that are not sandboxed, and see if this fixes things.

cc @mansona if you still have an app I could look at as well 😄

[jbescoyez]

@rwwagner90 Great! I gonna have a look at that.

You can get the app here https://chrome.google.com/webstore/detail/prospectio/dpkbdbpmahebenenkkjenihgfophknbm/related (it is bundled as a Chrome extension).

The iframe is added on any LinkedIn profile page with the Ember app inside.

[jbescoyez]

@rwwagner90 I've just tested and, unfortunately, the app in the iframe does not appear in the list :( Is there a way I can help you?

[RobbieTheWagner]

@jbescoyez I think what would help me most is some sort of minimal deployed app that just adds an iframe with an ember app sometime after it renders, so we can test this in an isolated way.

Is your iframe sandboxed? From what I have read, we cannot run chrome.tabs.executeScript on sandboxed iframes.

I don't know much about developing Chrome extensions, but since your app is a Chrome extension, maybe you could look at this PR and see if anything looks completely wrong or maybe pull it down and run locally and see what you can see?

I'm happy to jump on a call and screen share and explain how to run inspector and debug this if you'd like. The README is pretty good about explaining how to run things, but it may not explain everything.

[RobbieTheWagner]

We will specifically make this work for twiddle, and provide the steps necessary to make it work with other sandboxed iframes.