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

时间:2012-04-10 04:10:03

标签: javascript dom userscripts

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

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

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


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

加载页面后,用户脚本将被执行。如何更改此功能,以便它可以预先跟踪动态功能?

1 个答案:

答案 0 :(得分:2)

要“预先”跟踪所有动态加载的参数,请使用// @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);
}