ReferenceError：将 chrome 扩展迁移到 MV3 时，bg.js 文件中未定义文档

Question

我正在将 chrome 扩展代码从 Manifest V2 迁移到 V3。但是，我在 bg.js 文件的第 9 行收到“ReferenceError：文档未定义”。有人知道为什么吗？在MV2中效果很好

背景.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();
  }

});
    

清单.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
}

弹出.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"});

});

Answer 1

MV3 后台工作人员是服务工作人员，它们不是文档并且缺乏 DOM API。

\n

即使在 MV3 中， Firefox 也将支持常规背景页面，但在 Chrome 中，您必须使用offscreen文档来访问 DOM API

\n

\n
• https://developer.chrome.com/blog/Offscreen-Documents-in-Manifest-v3/
\n
• https://developer.chrome.com/docs/extensions/reference/offscreen/
\n

\n

就像是：

\n

// background-worker.js\nchrome.offscreen.createDocument({\n  url: chrome.runtime.getURL(\'off_screen.html\'),\n  reasons: [\'AUDIO_PLAYBACK\'],\n  justification: \'Playing audio on the user\xe2\x80\x99s request\',\n});\n

\n

// off_screen.html\n<script src="off_screen.js">\n

\n

// off_screen.js\nnew Audio(\'elevator-music.mp3\').play()\n

\n