Extension Development

Just a few days ago I wrote an article on how I was able to, with reasonable certainty, match up IFRAME elements in the DOM with the raw HTML source code obtained by searching through "document.body.innerHTML"

Those of you who know basic JavaScript DOM manipulation will find that article very confusing, as well as much of this one - my ramblings will make sense if you read on.

The very next morning I wondered if I could get better results by going directly to the IFRAME object and accessing its "outerHTML" property. And yes, that worked. It worked splendidly, and turned my hours of work the previous day into a steaming pile of waste-of-time. Then, I wondered if I could KISS some more, and pondered aloud: "Maybe I can get direct access to the 'src' attribute, and sidestep all this reading of HTML source code? But no... that wouldn't work... would it?" So I tried it, and it worked, and I was amazed that it worked. Then I scratched my head, rubbed my belly, and considered my reaction. Why was I so amazed that I could access the 'src' attribute? Wasn't this a pretty straightforward JavaScript action?

And then it dawned on me: my thinking was trapped inside the box.

See, back when I first toyed with the idea of detecting videos in IFRAMEs, I had a different approach in mind: when the extension is activated, the master/parent injected script would send out a broadcast message to the injected scripts running within the IFRAMEs and ask if any was hosting video content. Those IFRAMEs that had video elements in them would give a positive response back to the master/parent, which would then tag that IFRAME object as a potential candidate for focusing. As noted in previous blog posts, this didn't work that well. The injected script running within the IFRAMEs had no trouble identifying video elements, however they could not properly communicate this back to the master/parent: Opera blocked any message that I tried sending that contained identifiers, making it impossible for me to tell which IFRAME was sending the success responses - it wasn't even possible to tell if it was a response from an IFRAME on the current tab or from another tab running in Opera! One of the key identifiers I tried using was the URL of the IFRAME, i.e. the same "src" attribute that I am making use of now in my test extension.

Up until now, I'd imagine you've been wondering why I didn't go straight for the "src" attribute. After all, my stated goal is different from what I was trying to do earlier; now I just want to check the "src" attribute and compare the hostname against a set of hardcoded names. The answer is this: I was still working within my previous mindset. I still had this notion that I wasn't able to get at key information from the IFRAME object. The trouble is, it's been so long since I did my initial testing that I forgot what key information I couldn't access. I remembered it was something big, something about the URL or some other identifier; I forgot that this was specifically regarding extension messaging (i.e. passing messages between scripts running on separate pages).

When I started trying to get to the "src" attribute, I had it in my head that I couldn't access this directly. I'm kicking myself for it now, but that's the plain truth of it. I had misremembered facts and this altered perception forced me to choose actions from a limited toolbox. If I had taken the time to step outside the box (or whatever that expression is), I would've realized right away the simplest approach would be to get a reference to the IFRAME DOM object and just get the "src" attribute. But I kept my head down thinking I wasn't able to get at that precious info, and instead devised this roundabout method that, while it does work, certainly doesn't do as nearly an efficient job.

So there you have it. Thanks for reading this whole thing - it gives me warm & fuzzy feelings. As a thank-you present, I present to you an upgraded version of the IFRAME "src" testing extension that I shared in my past article. If you ignore all the commented code, you'll see it does the exact same job as the previous version, but better and with far fewer lines. Here's an example page with several videos in IFRAMEs - the extension will mark all of them.

Mike

P.S. Seeing as you've made it this far, please take a second to vote on the poll in the sidebar to the right. I'm just curious ...