navigator.getUserMedia 抛出错误 NotAllowedError：状态无效

尝试创建一个可以录制屏幕的 chrome 扩展（manifest v.3）。流程是：

• 在弹出窗口中显示录制按钮
• 单击记录按钮会在后台打开一个 html 页面
• html 页面向后台发送请求以显示活动选项卡的桌面选择器
• 用户选择窗口/选项卡并开始录制

这是代码（https://stackblitz.com/edit/web-platform-mxfsyx?file=index.html):

在弹出窗口中创建一个录制按钮

document.querySelector('#startFromBackgroundPage')
    .addEventListener('click', function(event) {
      chrome.runtime.sendMessage(
          { event: 'open-bg-page' }, function(response) { console.log(response); });
    });

背景页

chrome.runtime.onMessage.addListener(function(message, sender, sendResponse) {
  if (message.event === 'open-bg-page') {
    chrome.tabs.create({
      url: 'index.html',
      selected: false,
    });
  }

  if (message.event === 'record') {
    chrome.tabs.query({ currentWindow: true, active: true }, function (tabs) {
      chrome.desktopCapture.chooseDesktopMedia(
          ["screen", "window"],
          tabs[0],
          function(id, options) {
            chrome.runtime.sendMessage(
              {'mediaId': id, options: options});
          });
    });
  }
});

索引.html/app.js

// Send message as soon page is loaded.
setTimeout(() => {
  chrome.runtime.sendMessage(
    { event: 'record' }, function(response) { console.log(response); });
}, 500);

chrome.runtime.onMessage.addListener(function(message, sender, sendResponse) {
  console.log('on message', message);
  if (message.mediaId) {
    setTimeout(() => {
      onAccessApproved(message.mediaId, message.options);
    }, 100);
  }
});
// Launch webkitGetUserMedia() based on selected media id.
function onAccessApproved(id, options) {
  if (!id) {
    console.log('Access rejected.');
    return;
  }

  var audioConstraint = {
      mandatory: {
        chromeMediaSource: 'desktop',
        chromeMediaSourceId: id
      }
  };

  if (!options.canRequestAudioTrack)
    audioConstraint = false;

  navigator.getUserMedia({
    audio: audioConstraint,
    video: {
      mandatory: {
        chromeMediaSource: 'desktop',
        chromeMediaSourceId: id,
        maxWidth:screen.width,
        maxHeight:screen.height} }
  }, gotStream, getUserMediaError);
}

function getUserMediaError(error) {
  document.querySelector('#message').innerHTML = error;
  console.log('navigator.getUserMedia() error: ', error);
}

但它抛出错误：NotAllowedError：无效状态

如果我更换它工作正常tabs[0] with sender.tab在background.js中。但随后它在后台页面上显示我不想要的桌面/窗口选择器。我想记录当前活动选项卡。我在后台页面中处理它，因此即使页面刷新/关闭，视频录制也会继续。