Chrome扩展MV3中当前标签未显示在「选择共享内容」弹窗中

开发Chrome屏幕录制扩展时，调用navigator.mediaDevices.getDisplayMedia后，弹出的「选择共享内容」弹窗里看不到当前标签（截图：缺失当前标签的弹窗）。

我的manifest.json代码如下：

{
  "name": "web-vcr",
  "version": "1.0",
  "description": "Save Videos",
  "manifest_version": 3,
  "permissions": ["storage", "tabs", "desktopCapture", "downloads", "scripting", "activeTab"],
  "background": {
    "service_worker": "js/background.js"
  },
  "host_permissions": ["<all_urls>"],
  "content_scripts": [
   {
     "matches": ["*://*/*"],
     "css": ["css/styles.css", "css/injected-script.css"],
     "js": [
       "js/video-tools.js",
       "js/content-script.js",
       "js/inject-script.js"
      ]
   }
  ],
  "action" : {
    "default_icon": "img/icon-32.png",
    "default_popup": "html/popup.html"
  },
  "icons": {
    "256": "img/icon.png",
    "32": "img/icon-32.png"
  }
}

请问是否有其他方法获取包含当前标签的所有标签用于录制，或是我遗漏了某些配置？

解决方法 #

1. 调整API调用环境 #

别在content script里直接调用getDisplayMedia——content script的隔离环境会导致无法加载当前标签选项。必须把录制请求放在background service worker或者popup页面里发起。

2. 用chrome.desktopCapture.chooseDesktopMedia替代原生API #

这个Chrome专属API能精准控制可选内容类型，直接包含当前标签：

// 在background或popup中执行（需用户触发，比如点击按钮）
chrome.desktopCapture.chooseDesktopMedia(
  ['tab', 'window', 'screen'], // 指定可选类型：标签、窗口、屏幕
  async (streamId) => {
    if (!streamId) return; // 用户取消选择
    // 获取当前活跃标签，把streamId传给content script
    const [activeTab] = await chrome.tabs.query({active: true, currentWindow: true});
    chrome.tabs.sendMessage(activeTab.id, {type: 'START_RECORD', streamId});
  }
);

然后在content script里接收并获取媒体流：

chrome.runtime.onMessage.addListener(async (msg) => {
  if (msg.type !== 'START_RECORD') return;
  const stream = await navigator.mediaDevices.getUserMedia({
    video: {
      mandatory: {
        chromeMediaSource: 'desktop',
        chromeMediaSourceId: msg.streamId
      }
    }
  });
  // 这里处理你的录制逻辑
});

3. 确认配置细节 #

• 你的manifest.json权限已经足够（desktopCapture、activeTab都加了），但要注意chooseDesktopMedia只能在后台、popup或选项页调用，content script不行。
• 如果从popup调用，必须绑定用户交互事件（比如按钮点击），Chrome禁止无用户操作的媒体捕获请求。

4. 调试技巧 #

• 打开Chrome开发者工具的「Console」和「Service Worker」面板，查看有没有权限报错。
• 确保扩展是开发者模式加载的，没有被浏览器拦截权限。

内容的提问来源于stack exchange，提问作者Jahangeer Abbas