如何修改Chrome扩展程序中devtools面板下的内容?

时间:2012-07-24 04:45:26

标签: google-chrome-extension google-chrome-devtools

我正在开发Google Extension,我正在为开发人员工具添加新面板,它似乎对我来说很好。但我不知道如何通过JavaScript修改面板的内容。

有人能开导我吗?

1 个答案:

答案 0 :(得分:12)

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

使用chrome.devtools.panel.create创建面板时,可以指定回调。此回调接收类型为ExtensionPanel的参数。此对象定义onShownonHidden事件侦听器 onShown事件侦听器接收另一个参数:对面板的window对象的引用。现在,你可以做任何你想做的事。

例如,当用户第一次打开devtools面板时,将一些文本附加到面板:

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