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.
