javascript - 如何挂接到 Firefox 网络请求弹出窗口？

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

不幸的是，似乎没有任何简单的方法可以从插件代码创建这样的监听器。我尝试执行存储原始函数并替换技巧，它运行了，但它似乎没有以某种方式在正确的上下文中调用原始函数:

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