0

我想收听来自页面的所有请求（包括来自它可能拥有的 iframe），并为所有请求获取类似于资源计时 api 的指标。我希望能够从后台脚本执行此操作。

我尝试直接注入一个脚本标签，该标签将监听 dom 更改事件，然后使用该数据。但请参阅那里的 2 个问题 1. 它没有获取 iframe 的所有 dom 更改事件。2. 我无法找到从 iframe 发出的额外调用。

    {

      "manifest_version": 2,
      "name": "somwnamw",
      "version": "1.0",
      "author": "Me",
      "description": "Some desc",

      "icons": {
        "48": "icons/border-48.png"
      },

      "content_scripts": [
        {
            "matches": ["*://*.mydomain.com/*"],
        "js": ["trackIt.js"],
        "run_at": "document_start"
        }
      ],
      "background": {
        "scripts": ["background.js"]
      },
      "permissions": [
        "webRequest",
        "<all_urls>"
      ],
      "web_accessible_resources": ["pa.js"]

    }

我的内容脚本有这样的东西

            s.addEventListener('load', function(w) {

             });
            (document.body || document.documentElement).appendChild(s);

我注入 dom 的脚本看起来像这样

    var observeDOM = (function(){
        var MutationObserver = window.MutationObserver || window.WebKitMutationObserver,
            eventListenerSupported = window.addEventListener;
        return function(obj, callback){
            if( MutationObserver ){
                // define a new observer
                var obs = new MutationObserver(function(mutations, observer){
                    if( mutations[0].addedNodes.length || mutations[0].removedNodes.length )
                        callback();
                });
                // have the observer observe foo for changes in children            
                obs.observe( obj, { childList:true, subtree:true });
            }
            else if( eventListenerSupported ){
                obj.addEventListener('DOMNodeInserted', callback, false);
                obj.addEventListener('DOMNodeRemoved', callback, false);
                obj.addEventListener('DOMAttrModified', callback, false);
                obj.addEventListener('DOMElementNameChanged', callback, false);
                obj.addEventListener('DOMNodeInsertedIntoDocument', callback, false);
                obj.addEventListener('DOMNodeRemovedFromDocument', callback, false);
                obj.addEventListener('DOMSubtreeModified', callback, false);
            }
        };
    })();

    // Observe a specific DOM element:
    observeDOM( document.documentElement,function(data){
        let performanceData = performance.getEntries();
        console.log(performanceData);
        aggregateDataForFPTI(performanceData.slice(perfDataLength, performanceData.length));
        perfDataLength = performanceData.length;

    });

但是我上面的代码没有检测到 dom 更改，我也无法从 iframe 中获取调用。不过，我确实在 chrome 开发人员工具中看到了这些请求。这里我的 iframe 来自同一个域。

所以我想改为切换到后台脚本，然后收听页面上发生的所有调用并获取资源的时间。

4

0 回答 0