Accessing <iframe> upon an event in the iframe - with a chrome extension - google-chrome

Question

Using an extension, I'd like to measure the offset of an iframe (relative to the top window) when a specific event happens in it.
This includes iframes of different origins.
It seems to require two things:
catching the event in the iframe's own content-document
finding the iframe's corresponding DOM element (<iframe>) in its parent window and measuring its offset
I can run a content-script in all iframes which would catch the specific event, but I fail to identify an iframe's corresponding DOM element in iframes with different origins, since in those cases I'm denied access to 'window.frameElement'.
Any ideas?
I could perhaps look for an element with an 'src' attribute corresponding to 'window.location.href' as seen in the context of the iframe's content-script, but 'window.location.href' wouldn't be a unique identifier... or would it?

Answer 1

You could take the following approach:
Use the "all_frames":true flag of "content_scripts" in the manifest file to execute the content script in all frames.
Bind a message event listener which performs the logic.
Bind an event listener for the trigger in question.
Whenever the event in step 3 is fired, use if (top === window) to determine whether the we're inside the top window.
If yes, we're done.
If not, use parent.postMessage({currentTotal: ... }, '*'); to pass data to the parent frame. The message event listener from step two should detect this event, process it, and repeat step three.
I've explained how to approach the problem. One more useful code snippet: You need to identify the source frame. To achieve that, we use the contentWindow property of an <iframe> object for comparison with the source property of the event object:
window.addEventListener('message', function(event) {
if (top === window) {
// do something with e.data
} else {
var iframes = document.getElementsByTagName('iframe');
for (var i=0; i<iframes.length; i++) {
if (iframes[i].contentWindow === event.source) {
// Found frame; measure offset, and pass data to parent frame
var data = e.data;
e.data += iframes[i].getBoundingClientRect().top; // example
parent.postMessage({currentTotal: data}, '*');
break;
}
}
}
});
With these hints you should be able to write the full code yourself. To measure offsets, use the getBoundingClientRect method. For completeness, I also include links to other relevant documentation: window.postMessage, Content scripts (manifest).