使用用户脚本记录网页的动态创建的 DOM 元素

Question

我想使用用户脚本从网页中提取所有动态 javascript 函数。

有人建议对 DOM 对象使用挂钩。他们还提供了这个例子：

var f = document.createElement;document.createElement = function(tagName){ 
console.log(tagName); 
f.apply(document, arguments); }

我认为这个函数会记录所有document.createElement() 调用， 但是我应该在我的用户脚本中的哪里添加这个功能？
我尝试创建一个只包含此功能的用户脚本，但它不起作用。

用户脚本在页面加载后执行。如何更改此函数以便事先跟踪动态函数？

Answer 1

要“事先”跟踪所有动态加载的参数，请使用// @run-at document-start。

此外，您必须将代码注入目标页面，因为您要跟踪该页面的 javascript。

这是一个记录所有createElement() 调用的完整脚本。它适用于 Greasemonkey (Firefox) 和 Chrome 用户脚本：

// ==UserScript==
// @name        _Track dynamically added elements
// @namespace   Your PC
// @include     http://YOUR_SERVER/YOUR_PATH/*
// @run-at      document-start
// ==/UserScript==

//--- Intercept and log document.createElement().
function LogNewTagCreations () {
    var oldDocumentCreateElement    = document.createElement;

    document.createElement          = function (tagName) {
        var elem = oldDocumentCreateElement.apply (document, arguments);
        console.log ("Dynamically created a(n)", tagName, " tag.  Link: ", elem);
        return elem;
    }
}

/*--- The userscript or GM script will start running before the DOM is available.
    Therefore, we wait...
*/
var waitForDomInterval = setInterval (
    function () {
        var domPresentNode;
        if (typeof document.head == "undefined")
            domPresentNode = document.querySelector ("head, body");
        else
            domPresentNode = document.head;
        if (domPresentNode) {
            clearInterval (waitForDomInterval);
            addJS_Node (null, null, LogNewTagCreations);
        }
    },
    1
);

//--- Handy injection function.
function addJS_Node (text, s_URL, funcToRun) {
    var D                                   = document;
    var scriptNode                          = D.createElement ('script');
    scriptNode.type                         = "text/javascript";
    if (text)       scriptNode.textContent  = text;
    if (s_URL)      scriptNode.src          = s_URL;
    if (funcToRun)  scriptNode.textContent  = '(' + funcToRun.toString() + ')()';

    var targ = D.getElementsByTagName ('head')[0] || D.body || D.documentElement;
    targ.appendChild (scriptNode);
}