Question

我正在尝试修改debugtools元素面板以添加我自己的自定义数据。该数据与正在检查的页面的网页DOM无关。我想把自己的东西放在那里。

所以，我做了以下事情：

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

当我打开devtools时，我只看到我在“Token Details”面板的“DATA”子项下设置的对象。

我做错了什么？

Answer 1

我认为文档与extensionSidebarPane.setObject(string jsonObject, string rootTitle, function callback)混淆，它必须像extensionSidebarPane.setObject( jsonObject, string rootTitle, function callback)一样。

因此，您使用JSON.stringify()

明确地将其转换为字符串

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

我删除了最后一行var s = JSON.stringify(data); console.log(s);并且它正在运行。

enter image description here

<强>示范

使用您的功能我使用了以下代码。

<强> 的manifest.json

将devtools.html注册到清单

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

}

<强> devtools.html

使用devtools.html

的琐碎devtools.js

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

<强> devtools.js

消除了显式字符串标记。

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

如果您需要更多信息，请告诉我

无法使ExtensionSidebarPane.setObject工作

1 个答案: