How to modify content under a devtools panel in a Chrome extension?

Question

I am working on Google Extension where I am adding new panel to the developer tools and it seems to be working fine for me. But I don't know how to modify the content of the panel through JavaScript.

Could anyone enlighten me?

Answer 1

Displaying content in a panel is not that hard. First, I assume that you've created the base extension (consisting of manifest.json, devtools.html and devtools.js) following the documentation. devtools.html contains at least <script src="/devtools.js"></script>.

When chrome.devtools.panel.create is used to create a panel, a callback can be specified. This callback receives an argument of the type ExtensionPanel. This object defines the onShown and onHidden event listeners.
The onShown event listener receives an additional argument: A reference to the panel's window object. Now, you can do anything you wish.

For example, append some text to the panel, when the user opens the devtools panel for the first time:

chrome.devtools.panels.create("devtools Test", "/icon.png", "/panel.html",
  function(extensionPanel) {
    var runOnce = false;
    extensionPanel.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!'));
    });
});