Add Iframe Support

[gwwar]

Fixes #5

Previously when selecting elements in child frames, z-context would not be able to report any information, changes in this PR make is so that we should be able to see stacking contexts on any child iframes.

CleanShot.2021-11-03.at.15.01.56.mp4

Docs are extremely slim here, so this took quite a bit of experimentation. I finally found a decent solution to this. No idea on if this will pass for app review though.

The basic idea is that we also add a content_script.js which is injected in all child pages and iframes. We still have our devtools page, and also a background page to passthrough messages from the content script to the devtools page or vice versa.

After we create a sidebar panel, we tell the content scripts to message back the extension with their current urls.

We can then subscribe to dev tools change events with the right url

// register with the correct frame url
chrome.devtools.panels.elements.onSelectionChanged.addListener(
	() => {
		chrome.devtools.inspectedWindow.eval("setSelectedElement($0)", { useContentScriptContext: true, frameURL: msg.iframe } );
	}
);

TODO

• Fix initial devtools open
• See if https://developer.chrome.com/docs/extensions/reference/devtools_panels/#method-setOpenResourceHandler is viable to select the parent stacking context instead of generating a selector string.

[gwwar]

Adding a few updated resources

[gwwar]

Note that the "tabs" permission is unneeded. See #22