Chrome扩展屏幕共享窗口为何瞬间消失？

嘿，这个坑我之前帮好几个开发者踩过！你遇到的问题核心在于Chrome扩展Popup页面的生命周期特性：

当你点击Popup里的按钮触发屏幕共享时，系统的屏幕选择窗口弹出来的瞬间，Popup会因为失去焦点而立即关闭——而navigator.mediaDevices.getDisplayMedia()这个API是依赖发起它的上下文（也就是Popup页面）的，上下文没了，屏幕共享的选择窗口自然就跟着秒关了。

解决方案：把屏幕共享逻辑移到后台脚本 #

Popup是临时页面，一旦失去焦点就会销毁，所以我们需要把屏幕共享的发起逻辑放到**后台脚本（Background Script/Service Worker）**里，因为后台脚本是在浏览器后台持续运行的，不会因为Popup关闭而中断。

下面是具体的实现步骤：

1. 修改Popup页面，通过消息通知后台启动共享

Popup里只负责触发事件，把实际的共享逻辑交给后台：

<!-- popup.html -->
<button id="startShareBtn">启动屏幕共享</button>
<script>
document.getElementById('startShareBtn').addEventListener('click', () => {
  // 给后台发送消息，请求启动屏幕共享
  chrome.runtime.sendMessage({ type: 'init-screen-share' }, (res) => {
    if (res.success) {
      alert('屏幕共享已成功启动！');
    } else {
      alert(`启动失败：${res.errorMsg}`);
    }
  });
});
</script>

2. 在后台脚本中处理屏幕共享逻辑

根据你的Manifest版本选择对应的后台脚本：

• Manifest V2 使用background.js：

// background.js
chrome.runtime.onMessage.addListener((msg, sender, sendResponse) => {
  if (msg.type === 'init-screen-share') {
    // 在这里发起屏幕共享，上下文是后台脚本，不会被销毁
    navigator.mediaDevices.getDisplayMedia({ video: true, audio: false })
      .then(stream => {
        // 可以在这里保存流，或者传递给其他页面使用
        console.log('获取到屏幕共享流:', stream);
        sendResponse({ success: true });
      })
      .catch(err => {
        console.error('屏幕共享失败:', err);
        sendResponse({ success: false, errorMsg: err.message });
      });
    // 因为是异步操作，返回true保持消息通道开放
    return true;
  }
});

• Manifest V3 使用service-worker.js：

// service-worker.js
chrome.runtime.onMessage.addListener((msg, sender, sendResponse) => {
  if (msg.type === 'init-screen-share') {
    navigator.mediaDevices.getDisplayMedia({ video: true, audio: false })
      .then(stream => {
        console.log('获取到屏幕共享流:', stream);
        sendResponse({ success: true });
      })
      .catch(err => {
        console.error('屏幕共享失败:', err);
        sendResponse({ success: false, errorMsg: err.message });
      });
    return true;
  }
});

3. 配置Manifest权限

在manifest.json中添加desktopCapture权限，确保扩展能访问屏幕共享功能：

• Manifest V2：

{
  "manifest_version": 2,
  "name": "我的屏幕共享扩展",
  "version": "1.0",
  "browser_action": {
    "default_popup": "popup.html"
  },
  "background": {
    "scripts": ["background.js"]
  },
  "permissions": ["desktopCapture"]
}

• Manifest V3：

{
  "manifest_version": 3,
  "name": "我的屏幕共享扩展",
  "version": "1.0",
  "action": {
    "default_popup": "popup.html"
  },
  "background": {
    "service_worker": "service-worker.js"
  },
  "permissions": ["desktopCapture"]
}

额外提示 #

如果需要在Popup或其他页面中显示共享的画面，可以通过Chrome的消息机制把流传递过去，或者创建一个新的Tab页面来渲染视频流——只要保证发起getDisplayMedia的上下文是持久的（后台脚本、普通Tab页面等），就不会再出现窗口闪关的问题了。

内容的提问来源于stack exchange，提问作者Dave Stein