Google chrome Google Chrome扩展更改开发工具面板内容

我有一个chrome扩展，它在devtools中添加了一个面板。在本例中，我希望记录每个网络请求。问题是我不知道如何更改面板html内容。 我试图访问

文档

和

窗口。文档

，但没有成功

mainfest.json：

{
"name":"sesionID extractor",

"description":"Extract sessionID",

"minimum_chrome_version": "10.0",
"version":"1",
"manifest_version":2,

"devtools_page": "html/devtools.html",

"permissions": [    
    "http://*/*",
    "https://*/*"
  ]
}

html只包括main.js

main.js：

chrome.devtools.panels.create("My Panel",
    "MyPanelIcon.png",
    "../html/Panel.html",
    function(panel) {

        chrome.devtools.network.onRequestFinished.addListener(
          function(request) {

            var div = document.createElement("div");
            var text = document.createTextNode(JSON.stringify(request));
            div.appendChild(text);
            document.body.appendChild(div);

      });

    }
);

---

如何访问面板页面内容

您的

Panel.html

以与

devtools.html

相同的权限运行

您可以简单地侦听其中的事件并直接修改页面

---

如果特别需要从主devtools页面访问面板的框架，可以使用面板的

onShown

事件，如图所示。除其他外，这将允许使用

postMessage

进行通信

---

作为替代解决方案，您可以使用；但是，由于消息的广播性质，打开多个开发工具实例会使事情变得复杂。

您的

Panel.html

以与

devtools.html

相同的权限运行

您可以简单地侦听其中的事件并直接修改页面

---

如果特别需要从主devtools页面访问面板的框架，可以使用面板的

onShown

事件，如图所示。除其他外，这将允许使用

postMessage

进行通信

---

作为替代解决方案，您可以使用；然而，由于消息的广播性质，打开多个开发工具实例会使事情变得复杂。

正如我在访问面板窗口时所做的快速解决方法一样

chrome.devtools.panels.create("sessionID",
    "MyPanelIcon.png",
    "../html/Panel.html",
    function(extensionPanel) {

        var show = new Promise(function(resolve, reject) {
            extensionPanel.onShown.addListener(function(panelWindow) {                            
                resolve(panelWindow);
            });                
        });

        show.then(function(_panelWindow) {
          // manipulate Panel's DOM content through _panelWindow            
        });

    }
);

---

作为快速解决方法，我按照以下步骤进入面板窗口

chrome.devtools.panels.create("sessionID",
    "MyPanelIcon.png",
    "../html/Panel.html",
    function(extensionPanel) {

        var show = new Promise(function(resolve, reject) {
            extensionPanel.onShown.addListener(function(panelWindow) {                            
                resolve(panelWindow);
            });                
        });

        show.then(function(_panelWindow) {
          // manipulate Panel's DOM content through _panelWindow            
        });

    }
);

---

谢谢你的回复！谢谢你的回复！