I am trying to create a simple extension for google chrome which can measure data usage. For this i need to view the content-length field of every incoming http/https response header. I tried the documentation on google and all i was able to come up was the following. First one is the background.js javascript file:-
chrome.webRequest.onHeadersReceived.addListener(function(details){
console.log(details.responseHeaders);
},
{urls: ["http://*/*"]},["responseHeaders"]);
Following is my manifest.json code :-
{
"manifest_version": 2,
"name": "Getting started example",
"description": "Toggle Data Usage monitor",
"version": "1.0",
"browser_action": {
"default_icon": "icon.png",
"default_popup": "popup.html"
},
"content_scripts": [ {
"js": [ "DataUsageMonitor.js" ],
"matches": [ "http://*/*", "https://*/*" ],
"run_at": "document_idle"
} ],
"background": {
"scripts": ["background.js"]
},
"permissions": [
"http://*/*", "activeTab", "tabs", "webRequest"]}
All this code is supposed to do is print the response headers of all responses to the chrome console. But i get nothing in the chrome console when i run it. I am fairly new to javascript and very new to chrome extension development so please go easy on me.
Edit 1: Added the content script section in manifest.json and now the console says 'Cannot read property 'onHeadersReceived'
Edit 2: Added the webReqest part into a different javascript file called background.js and registered it as a background page in manifest.json I don't get the "can't read webRequest.OnheadersReceived" error anymore but the console is still empty