如何在Chrome扩展中的devtools面板下修改内容？ [英] How to modify content under a devtools panel in a Chrome extension?

问题描述

我正在开发Google Extension，在那里我将新面板添加到开发人员工具中，并且对我来说似乎工作正常。但我不知道如何通过JavaScript修改面板的内容。

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?

推荐答案

在面板中显示内容并不难。首先，我假设你已经创建了基本扩展（由 manifest.json ， devtools.html 和 devtools.js ）遵循文档。 devtools.html 至少包含< script src =/ devtools.js>< / script> 。

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>.

当 chrome.devtools.panel.create 用于创建面板，可以指定回调。此回调接收类型为 ExtensionPanel 。该对象定义了 onShown 和 onHidden 事件侦听器。

onShown 事件侦听器收到额外的参数：对面板的窗口对象的引用。现在，你可以做任何你想做的事。

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.

例如，当用户第一次打开devtools面板时，在面板上附加一些文本：

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

这篇关于如何在Chrome扩展中的devtools面板下修改内容？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！