Google Chrome扩展更改devtools面板内容

Question

我有一个chrome扩展，它向devtools添加了一个面板。在本例中，我希望记录每个网络请求。问题是我不知道如何改变面板的html内容。我尝试访问document和window.document，但都没有成功。

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://*/*"
  ]
}

devtools.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);

      });

    }
);

如何访问面板页面内容？

Answer 1

您的Panel.html使用与devtools.html相同的权限运行。

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

如果您特别需要从主devtools页面访问面板的框架，您可以使用面板的onShown事件，作为described in the docs。这将允许使用postMessage进行通信。

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

Answer 2

作为快速解决方法，我执行了以下操作来访问面板窗口。

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

    }
);