calling Contentscript.js on every Sub-Page of facebook

Question

When visiting facebook the contentscript.js is only being called once.

If you visit a different page such as your Profile it won't be called again, as the page isn't reloaded but rather called by ajax.

I'm looking for a way to call it every time.

I've already tried the solution mentioned in Chrome Extension : content script on facebook but that still does not work for me. It seems as if it never gets called regardless.

current background.js:

import ext from "./utils/ext";

ext.webRequest.onCompleted.addListener(function(details) {
 console.log("ajax");
 var url = document.createElement('a');
 url.href = details.url;
 if (url.search && url.search.indexOf('ajaxpipe=1') !== -1) {
    console.log('New page via AJAX.');
    ext.tabs.executeScript({'file' : 'contentscript.js'});
   }
}, {urls : ["*://*.facebook.com/*"]});

and contentscript.js

import ext from "./utils/ext";

console.log("content called");
if (document.location.href == 'https://www.facebook.com/'){
    chrome.runtime.sendMessage({ "newIconPath" : 'Icons/icon-16.png' });
} else {
   chrome.runtime.sendMessage({ "newIconPath" : 'Icons/icon-16-inactive.png'}); 
}

manifest.json (relevant part):

"background": {
    "scripts": [
      "scripts/background.js"
    ]
    },
  "permissions": [
    "tabs",
    "storage",
    "http://*/*",
    "https://*/*",
    "webNavigation",
    "webRequest"
  ],
  "options_ui": {
    "page": "options.html"
  },
  "content_scripts": [
    {
      "matches": [
        "http://www.facebook.com/*", 
        "https://www.facebook.com/*"
      ],
      "js": [
        "scripts/contentscript.js"
      ],
      "run_at": "document_end",
      "all_frames": false
    }
  ],

I am also using this codebase :https://github.com/EmailThis/extension-boilerplate