google-chrome-extension - 如何在 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 对象的引用。现在，您可以为所欲为。

例如，当用户第一次打开 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!'));
    });
});