Monitor a web page for changes in Javascript

I am currently developing a Chrome Extension for my school which will notify students when the school's website is updated. I have already figured out how to tell chrome that i am going to make cross-origin requests. But I am stuck at trying to get the request. I have the following code in bg.js:

var checkUrl="http://ift.tt/2og5hEU";
var firstCheck = false;
window.setInterval(checkForUpdate, 10000);
var pageLoad = new Date().getTime();

function checkForUpdate() {
$.ajax(checkUrl, {
    ifModified : true,
    type : 'HEAD',

    success : function (response, status, xhr) {
        if (firstCheck === false) {
          firstCheck = true;
          return;
        }
        console.info(response);   //ALWAYS outputs 'undefined'
        console.info(status);     //ALWAYS outputs 'undefined'

        // if the server omits the 'Last-Modified' header
        // the following line will return 0. meaning that
        // has not updated.

        var lastModified = new Date(xhr.getResponseHeader('Last-Modified')).getTime();

        console.info(lastModified);//ALWAYS outputs 0

        if (lastModified > pageLoad) {
          alert("modified TEST"); //Will change later
        }
    }
});
}

And this manifest.json:

{
"manifest_version": 2,
"name": "Hyperion",
"version": "0.0.1",

"description": "TEST",
"icons": {"16":"icons/icon16_chk.png"},
"background": {
  "scripts":["javascript/jquery-3.2.0.min.js","javascript/bg.js"],
  "persistent":false
},

"permissions":["http://*/", "https://*/"],

"browser_action": {
  "default_icon":"icons/icon16_chk.png",
  "default_title":"Nothing has changed!"
}
}

Why is the request and status always 'undefined' and why can i not see the Last-Modified header in the response

Any help would be appreciated! //Oskar