Home/ Questions/Q 8955785
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-15T14:37:52+00:00

I am trying to modify the debugtools elements panel to add my own custom

  • 0

I am trying to modify the debugtools elements panel to add my own custom data. That data is not related to the web page DOM of the page being inspected. I want to put my own stuff there.

So, I did the following:

function createDebug(token)

    {
        console.log("createDebug() " + token);
        chrome.devtools.panels.elements.createSidebarPane(
            "Token Details: " + token,
            function(sidebar) {
              function updateElementProperties() {
                console.log("updateElementProperties()");
                var data = {};
                data.token = token;
                var s = JSON.stringify(data);
                console.log(s);
                sidebar.setObject(s, "DATA");
              }
              console.log("createSidebarPane() callback");
              updateElementProperties();
        });
    }

When I open the devtools, I just see the object that I set on the “DATA” subitem of “Token Details” panel.

What am I doing wrong?

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    I guess documentation is confusing with extensionSidebarPane.setObject(string jsonObject, string rootTitle, function callback) it has to be some thing like extensionSidebarPane.setObject( jsonObject, string rootTitle, function callback).

    becasue of this you are explicitly converting it to string using JSON.stringify()

    var data = {};
data.token = token;
var s = JSON.stringify(data);
console.log(s);

    I have eliminated the last lines var s = JSON.stringify(data);
    console.log(s);     and it is working.

    enter image description here

    Demonstration

    Using your function i got it working with following code.

    manifest.json

    Registered devtools.html to the manifest

    {
  "name": "Dev Tools",
  "description":"This demonstrates dev tools API",
  "version": "1.0",
  "manifest_version":2,
  "devtools_page": "devtools.html"

}

    devtools.html

    Trivial devtools.html using devtools.js

    <html>
<head>
<script src="devtools.js"></script>
</head>
<body>
</body>
</html>

    devtools.js

    Eliminated explicit string tokenizing.

    function createDebug(token){
    console.log("createDebug() " + token);
        chrome.devtools.panels.elements.createSidebarPane(
            "Token Details: " + token,
            function(sidebar) {
              function updateElementProperties() {
                console.log("updateElementProperties()");
                var data = {};
                data.token = token;
                //Commenting out explicit string conversion
                //var s = JSON.stringify(data);
                //console.log(s);
                sidebar.setObject(data, "DATA");
              }
              console.log("createSidebarPane() callback");
              updateElementProperties();
    });

}

document.addEventListener("DOMContentLoaded",function (){
    createDebug("Trivial Token one");
});

    Let me know if you need more information

    • 0