I am migrating my chrome extension code from Manifest V2 to V3. However, I get a "ReferenceError: document is not defined" in line 9 of my bg.js file. Does anyone recognize why? It worked fine in MV2

bg.js

   //Listen for messages
chrome.runtime.onMessage.addListener((msg, sender, response) => {

  if(msg.name == "playTrack"){

    //...
    var trackName = msg.track;
    var audioEle = document.querySelector('.audio-element');
    audioEle.src = 'track-'+trackName+'.mp3';
    audioEle.play();

  }

  if(msg.name == "pauseTrack"){

    var audioEle = document.querySelector('.audio-element');
    audioEle.pause();
  }

});
    

manifest.json

    {
  "name": "Sizzo",
  "version": "0.01",
  "description": "Sizzo - Stay flawless with the perfect audio reminders",
    "action": {
        "default_title": "Sizzo",
        "default_popup": "popout.html"
    },
  "background":{
    "service_worker": "bg.js"
  },
  "icons": { "48": "icon48.jpg",
             "128": "icon128.jpg" },
  "manifest_version": 3
}

popout.js

   document.querySelector('button.play').addEventListener('click', function(){
  var SelTrack = document.querySelector('select').value;

  chrome.runtime.sendMessage({name: "playTrack", track: SelTrack});

});


document.querySelector('button.pause').addEventListener('click', function(){

  chrome.runtime.sendMessage({name: "pauseTrack"});

});