Chrome extension: Content script not picking up changes to chrome.storage

I'm trying to build an extension to monitor the xhr portion of the devtools network tab. With some help , I have been able to get the requests to be displayed on the service-worker console and I can log the Post requests. I'm also now saving the data "point" in chrome.storage. My next step is to read the data from chrome.storage.local, and have the content script log it to the console. However although I am getting no errors, I don't see any output in the console. No errors seen though. What am I doing wrong?

manifest.json:

{
 "manifest_version": 3,
 "version": "1.0",
 "name": "Hello World!",
   "description": "Learning how to make a chrome extension!",
 "icons": {
"16": "images/puppy16.png",
"48": "images/puppy48.png",
"128": "images/puppy128.png"
},
"action": {
"default_icon": "images/puppy.png",
"default_popup": "popup.html"
},
"background": {
"service_worker": "background.js"
},
"host_permissions": ["*://*.cnn.com/"],
"permissions": ["webRequest", "activeTab","tabs"],
"content_scripts": [
{
  "matches": ["*://cnn.com/*"],
  "js": ["popup.js"]
  }
 ]
}

In my background.js:

(function () {

    var point;

    chrome.webRequest.onBeforeRequest.addListener(
        function (details) {
     
            // Use this to decode the body of your post
            const postedString = decodeURIComponent(String.fromCharCode.apply(null,
                new Uint8Array(details.requestBody.raw[0].bytes)));
            console.log(postedString)
            const body = JSON.parse(postedString);
            point = body.CenterPoint.Point;
            console.log(point);
          chrome.storage.local.set({ 'key': point }, function () {
        console.log('Value is set to ' + point);
    });
        },
        { urls: [url] },
        ["requestBody"]

    );
    

})();

popup.js:

chrome.storage.onChanged.addListener(function (changes, namespace) {
    for (let [key, { oldValue, newValue }] of Object.entries(changes)) {
    console.log(
        `Storage key "${key}" in namespace "${namespace}" changed.`,
        `Old value was "${oldValue}", new value is "${newValue}".`
    );
    }
});