我正在开发Google Extension,我正在为开发人员工具添加新面板,它似乎对我来说很好。但我不知道如何通过JavaScript修改面板的内容。
有人能开导我吗?
答案 0 :(得分:12)
在面板中显示内容并不难。首先,我假设您已在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!'));
});
});