How to programatically see all AJAX requests made by a webpage within a Chrome Extension?

Question

The webpage that I've designed my extension for has some buttons that when clicked, make AJAX requests to load dynamic content. I want to be able to know when that content is loaded. I'm using the chrome.webRequest API in my extension. Essentially I want to add a listener to the tab and whenever the request is made I want to do something.

At first I tried putting this code in the content script because I figured the requests would be made on the webpage but it was undefined.

chrome.webRequest.onCompleted.addListener(
    function(details) {
        console.log(details);
    },
{
    urls: ["<all_urls>"]}
);

Then I put it in the background.js file but it didn't do anything. So I'm wondering if there's something I'm doing wrong or maybe not using the API correctly.

Also my manifest does have the right permissions:

"permissions": [
    "tabs",
    "storage",
    "webRequest"
  ],

So how can I go about doing this? Thanks.