如何修改Chrome扩展中的devtools面板下的内容？

Question

我正在使用Google扩展程序，我正在向开发人员工具添加新面板，它似乎对我来说工作正常。但我不知道如何通过JavaScript修改面板的内容。

任何人都可以启发我吗？

Answer 1

在面板中显示内容并不难。首先，我假设您已创建了以下the documentation之后的基本扩展（由manifest.json,devtools.html和devtools.js组成）。 devtools.html至少包含<script src="/devtools.js"></script>。

当使用chrome.devtools.panel.create创建面板时，可以指定回调。此回调接收类型ExtensionPanel的参数。该对象定义了onShown和onHidden事件侦听器。
onShown事件侦听器接收附加参数：对面板的window对象的引用。现在，你可以做任何你想做的事情。

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