CODEWITHSUNDEEP
google-chromegoogle-chrome-extensiongoogle-chrome-devtools
Artsiom Miklushou
Artsiom Miklushou

Reputation: 754

Google Chrome extension change devtools panel content

I have a chrome extension that adds a panel to the devtools. In this example I want to log every network request. The problem is that I don't know how to change panel html content. I tried to access document and window.document but without any success.

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

      });

    }
);

How to access Panel page content?

Upvotes: 1

Views: 664

Answers (2)

Artsiom Miklushou
Artsiom Miklushou

Reputation: 754

As quick workaround I did following to access Panel window. 

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

    }
);

Upvotes: 2

Xan
Xan

Reputation: 77523

Your Panel.html runs with the same privileges as devtools.html.

You can simply listen to the event within it and modify the page directly.

If you specifically need to access the panel's frame from the main devtools page, you can use onShown event of the panel, as described in the docs. This would allow, among other things, communication using postMessage.

As a alternative solution, you can use Chrome Messaging; however, because of the broadcast nature of messaging, having several instances of Dev Tools open will complicate things.

Upvotes: 1

Related Questions