Question

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

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

但它似乎不起作用。我查看了源代码，the file看起来没有显示元素的代码，另一种形式必须调用它。我想知道是否有一种简单的方法可以从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

Answer 1

这个有效！它在Web控制台日志弹出窗口中显示了漂亮的JSON。不幸的是，如果您选择JSON文本，则选择会遍布整个地方。（在Firefox 21上）。我不确定这是最好的解决方案，取代了DevTools功能。插件可用here。

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

如何挂钩到Firefox网络请求弹出窗口？

1 个答案: