rev087
Add support for AngularJS apps inside iframes
The extension currently doesn't support inspecting Angular apps inside iframes. Users reported this issue in the context of:
- Umbraco
- SharePoint 2013
Kicking off some brainstorming for how to accomplish this.
I don't believe this will be super easy, due to the fact that our injected ng-inspector.js runs in the context of the top frame, and won't be able to break cross-origin restrictions to read the DOM tree in the iframe, or to overwrite the angular bootstrapping method.
However, we can probably accomplish it using postMessage API. We would need to configure the extension in Chrome and Safari to load in every frame of the document (automatic in Safari, a setting in the Chrome manifest). Then, any changes in the iframe's app would send a message/notification up to the parent document, advising it to update the ng-inspector panel. The app in the iframe could then display normally. If there is an app in the parent document and the child document, I imagine the ng-inspector panel would use the same display it does for 2+ apps now.
I suspect that the plan above would require a significant refactor of the existing code, if we don't want things to get messy. If we went this route, we would probably want to create some sort of generic way to pass messages that will update the inspector panel, and then have both the top documents updates and the iframes updates going through that same pipeline.
Another implementation could use chrome.runtime.sendMessage instead of postMessage. This would remove the necessity to deal with interfering messages from the webpage itself. This is a chrome extension only feature, though.
Would it work just by loading ng-inspector.js in every frame? https://developer.chrome.com/extensions/content_scripts#all_frames
