Do we have equivalent of resource timing api which can be used from browser extension

Question

I want to listen to all the requests going from a page(including from the iframes that it might have) and get metrics similar to resource timing api for all of the requests. I want to be able to do this from a background script.

I tried injecting a script tag directly which will listen to dom change events and then use that data. but see 2 problem there 1. it doesn't get all the dom change events of iframes. 2. I'm unable to locate the additional calls that are made from the iframes.

    {

      "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"]

    }

My content script has something like this

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

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

And the script I'm injecting into the dom looks like this

    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;

    });

But my above code doesn't detect dom changes and I'm also unable to get the calls made from the iframes. I do see those requests in chrome developer tools though. here my iframes are from the same domain.

So I want to instead switch to background script and then listen to all the calls happening from the page and get the resource's timings.