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

Question

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

有人建议对 DOM 对象使用钩子(Hook)。他们还提供了这个例子:

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

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

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

Answer 1

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

此外，您必须将代码注入(inject)目标页面，因为该页面的 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);
}