chrome extension don't have access to chrome.storage in javascript file

Question

I am currently creating a chrome extension and I have it such that there is a button on the default popup window that makes the popout window a different html file. In the js file that is linked to the new html popout file, I am trying to access the chrome.storage api. I get this error: Uncaught TypeError: Cannot read properties of undefined (reading 'sync') at HTMLImageElement. (creategroup.js:9:20). the code for that js file is:

var inputbox = document.getElementById("siteinput");

console.log(inputbox);

let addgroup = document.getElementById("addgroup");
addgroup.addEventListener('click', function(){
    
    chrome.storage.sync.set({key: inputbox.value}, function() {
        console.log('Value is set to ' + inputbox.value);
        sitesarray.push(inputbox.value);
        console.log(sitesarray);
      });
    
});

I have the storage permission in the manifest, but it doesn't work here. I suspect it is because this js file is linked to a html file whose only connection to the extension is that the default popout js file makes that the window location. I'm not sure how to fix this and any help is greatly appreciated and I will try my best to clarify and answer questions. Thanks so much!