How to update the Panel DOM in a Chrome Extension Panel

This post is more than 2 years old.

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.)

When you define your extension, you set it up so that JavaScript is used to call the extension API and create a panel. You have one HTML file that serves as the "devtools_page", which can then load JavaScript to create the panel which opens the "real" HTML page for your panel, let's say panel.html.

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.

Raymond Camden's Picture

About Raymond Camden

Raymond is a senior developer evangelist for Adobe. He focuses on document services, JavaScript, and enterprise cat demos. If you like this article, please consider visiting my Amazon Wishlist or donating via PayPal to show your support. You can even buy me a coffee!

Lafayette, LA https://www.raymondcamden.com

Archived Comments

Comment 1 by cristi posted on 4/14/2014 at 10:50 PM

chrome.devtools.panels.create("Font Picker", "FontPicker.png", "panel.html", function (panel) {
var runOnce = false;
panel.onShown.addListener(function(panelWindow) {
if (runOnce) return;
runOnce = true;
// Do something, eg appending the text "Hello!" to the devtools panel
panelWindow.document.body.appendChild(document.createTextNode('Hello!'));
});
});

Comment 2 by Raymond Camden posted on 4/14/2014 at 10:56 PM

Um, care to expand on what you are sharing?

Comment 3 by Carlo posted on 5/6/2014 at 2:39 PM

Hi!

Thanks for the explanation! While poking around I've found that if you include panel.js from panel.html, you can access the panel.html DOM simply bay relaxying the security policies.

Just add this line in the manifest.json:

"content_security_policy": "script-src 'self'; object-src 'self'"

Comment 4 by Raymond Camden posted on 5/6/2014 at 4:15 PM

I'm sure that is properly documented... right? Hopefully.