Using chrome.storage.sync to save checkbox state

I am struggling to save the state of multiple checkboxes with the chrome.storage.sync. Checkboxes should keep being checked/unchecked after page refresh. My current code looks like this:

<script>
var checkboxValues = JSON.parse(chrome.storage.sync.get('checkboxValues')) || {},
    $checkboxes = $("#checkbox-container :checkbox");

        console.log(checkboxValues);
                
$checkboxes.on("change", function(){
  $checkboxes.each(function(){
    checkboxValues[this.id] = this.checked;
  });
  
chrome.storage.sync.set("checkboxValues", JSON.stringify(checkboxValues));
});

// On page load
$.each(checkboxValues, function(key, value) {
  $("#" + key).prop('checked', value);
});

copy(JSON.stringify(JSON.stringify(chrome.storage.sync)));

</script>

its not saving the state of the checkboxes and I always get the error:"Uncaught TypeError: Cannot read property 'sync' of undefined" even if I added the "storage" permission to my manifest.json

really need your help guys :D every suggestion is highly appreciated!