使用用户脚本记录网页的动态创建的DOM元素 [英] Log a web page's dynamically-created, DOM elements with a userscript

问题描述

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

  var f = document.createElement; document.createElement = function（tagName）{
的console.log（标签名）; 
 f.apply（document，arguments）; 
  

我认为这个功能会记录所有的 document.createElement（）调用
但是在我的userscript中添加这个函数的位置？

我尝试创建一个只包含这个函数的用户脚本，不工作。

在页面加载后，用户脚本被执行。这个功能如何改变，以便在手之前跟踪动态功能？

解决方案

在手之前跟踪所有动态加载的参数，使用 // @ run-at document-start 。

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

这是一个完整的脚本，用于记录所有 createElement（）调用。它与Greasemonkey（Firefox）和Chrome用户脚本一起使用：

  // == UserScript == 
 // @名称_Track动态添加元素
 // @namespace您的PC 
 // @include http：// YOUR_SERVER / YOUR_PATH / * 
 // @ run-at document-start 
 / / == / UserScript == 
 
 // ---拦截和记录document.createElement（）。 
函数LogNewTagCreations（）{
 var oldDocumentCreateElement = document.createElement; 
 
 document.createElement = function（tagName）{
 var elem = oldDocumentCreateElement.apply（document，arguments）; 
 console.log（动态创建a（n），tagName，tag：Link：，elem）; 
 return elem; 
} 
} 
 
 / * ---用户脚本或GM脚本将在DOM可用之前开始运行。 
因此，我们等待... 
 * / 
 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 
）; 
 
 // ---手动注入功能。 
函数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）; 
} 
  

I want to extract all the dynamic javascript functions from a web page, with a userscript.

Someone suggested using a hook for DOM objects. They also provided this example:

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

I think this functions logs all the document.createElement() calls, but where do I add this function in my userscript?
I tried creating a userscript which contains only this function, but it did not work.

The userscript gets executed after the page is loaded. How can this function be changed so that it tracks the dynamic functions before hand?

解决方案

To track all dynamically loaded arguments "before hand", use // @run-at document-start.

Also, you must inject the code into the target page, because the page's javascript is what you want to track.

Here is a complete script that logs all createElement() calls. It works with both Greasemonkey (Firefox) and Chrome userscripts:

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

这篇关于使用用户脚本记录网页的动态创建的DOM元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！