0

我正在尝试修改调试工具元素面板以添加我自己的自定义数据。该数据与被检查页面的网页 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 时，我只看到我在“令牌详细信息”面板的“数据”子项上设置的对象。

我究竟做错了什么？

4

1 回答 1

6

我猜文档令人困惑，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);，它正在工作。

在此处输入图像描述

示范

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

清单.json

注册devtools.html到清单

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

}

开发工具.html

微不足道devtools.html的使用devtools.js

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

开发工具.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");
});

如果您需要更多信息，请与我们联系

于 2012-12-07T07:10:25.883 回答