Log a web page's dynamically-created tag attributes with a userscript

问题

I am able to track all the dynamically created tags, using Brock Adams' answer to "Log a web page's dynamically-created, DOM elements with a userscript".

Now I want to get the attributes of the tags. I tried it by adding an if condition in LogNewTagCreations () but it didn't work.
In this example I am checking attributes for script tags:

if(tagName=="script")
    {
        console.log("------------",elem.attributes.src.Value);
    }

Please help me.

回答1:

Because a <script>s src is set outside the createElement() call, adapting the previous script requires a little more work than that. You must check for the src attribute essentially asynchronously.

One way to do that is with another polling interval. Rolling that into the previous script (along with some housekeeping), the script code becomes:

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

        if (tagName == "script") {
            GetScriptAttributes (elem);
        }

        return elem;
    }
}

function GetScriptAttributes (elem, tagNum, timerIntVar) {
    /*--- Because a <script>s src or text won't be set for some while, we need
        to poll for when they are added.
    */
    GetScriptAttributes.tagNum  = GetScriptAttributes.tagNum || 0;
    if ( ! tagNum) {
        GetScriptAttributes.tagNum++;
        tagNum = GetScriptAttributes.tagNum;
    }

    if (elem.src) {
        doneWaiting ();
        console.log (
            "Script tag", tagNum,
            " has a src attribute of:", elem.src
        );
    }
    else if (elem.textContent) {
        doneWaiting ();
        console.log (
            "Script tag", tagNum,
            " has a JS code of:", elem.textContent
        );
    }
    else {
        if ( ! timerIntVar) {
            var timerIntVar = setInterval (
                function () {
                    GetScriptAttributes (elem, tagNum, timerIntVar);
                },
                50
            );
        }
    }

    function doneWaiting () {
        if (timerIntVar) {
            clearInterval (timerIntVar);
        }
    }
}

/*--- 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 (GetScriptAttributes.toString() );
            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);
}

来源：https://stackoverflow.com/questions/10085343/log-a-web-pages-dynamically-created-tag-attributes-with-a-userscript

标签

javascript

dom

userscripts