如何在Chrome扩展程序的开发工具面板下修改内容？

Question

我正在开发谷歌扩展程序，我在开发者工具中添加了一个新的面板，看起来对我来说运行良好。但是我不知道如何通过JavaScript修改面板的内容。请问有谁能够给我指点一下吗？

- Pritesh Patel

---

不是我的问题。也许我没有跟上。实际上，我想从网络请求中读取标题并在面板中显示内容。 - Pritesh Patel

Answer 1

显示面板中的内容并不难。首先，我假设您已经根据文档创建了基本扩展（包括manifest.json、devtools.html和devtools.js）。devtools.html 至少包含 <script src="/devtools.js"></script>。

当使用 chrome.devtools.panel.create 创建面板时，可以指定回调函数。此回调函数接收类型为 ExtensionPanel 的参数。此对象定义了onShown 和 onHidden 事件监听器。
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!'));
    });
});

- Rob W

---

非常好，谢谢你Rob。对我来说，onShown监听器不起作用，因为我试图在create函数调用之外尝试它。 - Pritesh Patel