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

      });

    }
);

如何访问Panel页面内容？

Answer 1

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

您可以直接听取其中的事件并直接修改页面。

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

作为替代解决方案，您可以使用Chrome Messaging;但是，由于消息的广播性质，开放Dev Tools的几个实例会使事情变得复杂。

Answer 2

作为快速解决方法，我访问了Panel窗口。

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

    }
);

Google Chrome扩展程序更改了devtools面板内容

2 个答案: