A few weeks ago I posted a blog entry on how you can create new panels in Chrome Dev Tools. I've finally made some time to look more into this feature and I ran into an interesting problem. (Before continuing on, I strongly recommend reading the earlier entry or none of this will make sense.)
So to be clear, you've got:
devtools.html (doesn't need to be named this) loading devtools.js (ditto) which creates a panel called panel.html (ditto ditto).
To make things more complex, I had panel.html load panel.js. I attempted to do something like this: document.querySelector("#status").innerHTML="hi". Doing so threw an error. I did some testing, and even though panel.js was loaded in by panel.html, it didn't have access to the DOM of panel.html. (Or at least not directly.)
I backed up a bit, spent some more time looking at the DOM, and discovered the proper way of handling this.
When you create a panel, the callback function is passed a panel object. That panel object supports you assigning a few event handlers to it, one being "onShown". If you specify an onShown handler, it gets passed a window object which represents the DOM of your panel.
This probably makes no sense. Sorry. Here is my devtools.js showing this in action.
Hopefully when I get this extension done I can post a followup that brings these tips into something more coherent.