1

我想尝试改进 Firefox 控制台弹出网络信息对话框的方式。我试过覆盖：

overlay chrome://browser/content/NetworkPanel.xhtml chrome://devtooltweaks/content/netWinOverlay.xul

但它似乎不起作用。我查看了源代码，该文件看起来没有显示元素的代码，必须是另一个表单调用它。我想知道是否有一种简单的方法可以从 Firefox 扩展向这个弹出窗口添加功能？

- 更新 -

我在 NetworkPanel.jsm 中找到了一些相关代码：

   // Set the document object and update the content once the panel is loaded.
   this.iframe.addEventListener("load", function onLoad() {
     if (!self.iframe) {
       return;
     }

     self.iframe.removeEventListener("load", onLoad, true);
     self.update();
   }, true);

不幸的是，似乎没有任何简单的方法可以从插件代码创建这样的侦听器。我尝试使用 store-original-function-and-replace 技巧，它运行，但它似乎并没有以某种方式在正确的上下文中调用原始函数：

<?xml version="1.0" encoding="utf-8"?>
<overlay id="helloworldOverlay" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
<script>
var origOpenNetPanel = WebConsoleFrame.prototype.openNetworkPanel;
WebConsoleFrame.prototype.openNetworkPanel = function WCF_openNetworkPanel(aNode, aHttpActivity) {
    //Run the original, in its natural ('this') environment:
    var netPanel = origOpenNetPanel.call(this, aNode, aHttpActivity);
    //todo: add modification.
    return netPanel;
}
</script>
</overlay>

^ 我最初尝试过.call(WebConsoleFrame和.call(WebConsoleFrame.prototype。通常这应该可以工作，可能是chrome代码中的一些特殊情况？

上面的代码正在使用此叠加层：

overlay chrome://browser/content/devtools/webconsole.xul chrome://devtooltweaks/content/netWinOverlay.xul
4

1 回答 1

0

这行得通！它在 Web 控制台日志弹出窗口中显示漂亮的 JSON。不幸的是，如果您选择 JSON 文本，则选择遍地都是。（在 Firefox 21 上）。不过，我不确定这是最好的解决方案，替换 DevTools 函数。插件可在此处获得。

WebConsoleFrame.prototype.origOpenNP = WebConsoleFrame.prototype.openNetworkPanel;
WebConsoleFrame.prototype.openNetworkPanel = function WCF_openNetworkPanel(aNode, aHttpActivity) {
    //Run the original, in its natural ('this') environment:
    var netPanel = WebConsoleFrame.prototype.origOpenNP.call(
                   this, aNode, aHttpActivity);
    netPanel.iframe.addEventListener('load',function(event) {
        //for(a in netPanel.iframe) {dump(a+"\n");}
        var doc = event.originalTarget;
        doc.body.style.backgroundColor='blue';
        var respDiv = doc.getElementById('responseBody');
        if (!respDiv) {
            respDiv = doc.getElementById('responseBodyCached');
        }
        if (respDiv) {
            var a = doc.createElement('button');
            a.appendChild(doc.createTextNode('JSON'));
            respDiv.childNodes[1].appendChild(a);
            a.addEventListener('click',function() {
                var fetch = doc.getElementById('responseBodyFetchLink');
                if (fetch) {
                    var evt = doc.createEvent("MouseEvents");
                    evt.initMouseEvent("mousedown", true, true, doc.parentWindow,
                      0, 0, 0, 0, 0, false, false, false, false, 0, null);
                    fetch.dispatchEvent(evt);
                }
                for (let i=0; i<respDiv.children.length; i++) {
                    if (respDiv.children[i].nodeName == 'table') {
                        var resp = respDiv.children[i].textContent;
                        let obj = JSON.parse(resp);
                        let str = JSON.stringify(obj, undefined, 4);
                        respDiv.children[i].innerHTML = window.netWinTweak.syntaxHighlight(str);
                        break;
                    }
                }
            });
        }
    },true);

    return netPanel;
}

var netWinTweak = netWinTweak || {};
// From http://stackoverflow.com/questions/4810841/json-pretty-print-using-javascript
netWinTweak.syntaxHighlight = function(json) {
    json = json.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;');
    return '<style>pre {outline: 1px solid #ccc; padding: 5px; margin: 5px; }'+
'.string { color: green; }'+
'.number { color: darkorange; }'+
'.boolean { color: blue; }'+
'.null { color: magenta; }'+
'.key { color: red; } </style>'+
'<pre>'+json.replace(/("(\\u[a-zA-Z0-9]{4}|\\[^u]|[^\\"])*"(\s*:)?|\b(true|false|null)\b|-?\d+(?:\.\d*)?(?:[eE][+\-]?\d+)?)/g, function (match) {
        var cls = 'number';
        if (/^"/.test(match)) {
            if (/:$/.test(match)) {
                cls = 'key';
            } else {
                cls = 'string';
            }
        } else if (/true|false/.test(match)) {
            cls = 'boolean';
        } else if (/null/.test(match)) {
            cls = 'null';
        }
        return '<span class="' + cls + '">' + match + '</span>';
    })+'</pre>';
}
于 2013-06-06T01:22:11.817 回答