Question

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

我尝试直接注入脚本标记，它将监听dom change事件，然后使用该数据。但在那里看到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来自同一个域名。

所以我想转而使用后台脚本，然后听取页面发生的所有调用，并获取资源的时间。

我们是否有相应的资源计时api，可以在浏览器扩展

0 个答案: