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

google-chrome-devtools, google-chrome-extension

Solution

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!'));
    });
});

Problem

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?

Original source