javascript - 使用用户脚本记录网页的动态创建的标签属性

Question

我能够使用 Brock Adams 对“Log a web page's dynamic-created, DOM elements with a userscript”的回答来跟踪所有动态创建的标签。

现在我想获取标签的属性。我通过添加一个 if 条件来尝试它，LogNewTagCreations ()但它没有用。
在此示例中，我正在检查脚本标签的属性：

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

请帮我。

Answer 1

因为<script>ssrc是在createElement()调用之外设置的，所以调整前面的脚本需要比这更多的工作。您必须基本上异步检查src属性。

一种方法是使用另一个轮询间隔。将其滚动到前面的脚本中（以及一些内务处理），脚本代码变为：

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