本文介绍了如何在Chrome扩展中的devtools面板下修改内容?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我正在开发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>.

当用于创建面板,可以指定回调。此回调接收类型为。该对象定义了 onShown onHidden 事件侦听器。

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

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面板下修改内容?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!

10-20 00:55