如何在Chrome扩展中检测用户是否正在进行屏幕共享？

一、核心检测思路：利用Chrome扩展特权API #

Chrome扩展可以通过内置API或内容脚本注入的方式，实现对屏幕共享行为的检测，无需依赖页面自身的getDisplayMedia调用逻辑：

1. 用chrome.tabCapture监控标签页捕获状态 #

这个API能直接监听标签页的媒体捕获（含屏幕共享）状态变化，也可主动获取当前正在被捕获的标签页列表：

// 监听捕获状态变更
chrome.tabCapture.onStatusChanged.addListener((info) => {
  if (info.status === 'active') {
    // 该标签页正在进行屏幕共享
    console.log(`标签页 ${info.tabId} 启动共享`);
    // 执行你的特定操作
  } else if (info.status === 'stopped') {
    // 共享已停止
  }
});

// 获取当前所有被捕获的标签页
chrome.tabCapture.getCapturedTabs({}, (tabs) => {
  tabs.forEach(tab => {
    console.log(`正在共享的标签页ID：${tab.id}`);
  });
});

需在manifest.json中声明tabCapture权限，此方法仅能检测标签级别的捕获，窗口或全局屏幕共享需结合其他方案。

2. 通过chrome.desktopCapture捕获共享请求 #

当用户发起屏幕共享时，chrome.desktopCapture.chooseDesktopMedia会触发权限弹窗，可通过回调捕获共享启动事件：

chrome.desktopCapture.chooseDesktopMedia(
  ['screen', 'window', 'tab'],
  null,
  (streamId) => {
    if (streamId) {
      // 用户确认共享，streamId有效
      console.log('屏幕共享已启动');
      // 执行对应操作
    } else {
      // 用户取消共享请求
    }
  }
);

需声明desktopCapture权限，此方法仅能捕获通过该API发起的共享，网页自身调用getDisplayMedia的情况需结合内容脚本。

二、第三方网页应用（Zoom/Meet等）的精准检测 #

TeamViewer、Zoom这类网页应用本质是调用浏览器getDisplayMedia发起共享，可通过内容脚本注入覆盖全局方法来捕获行为：

// content.js 中注入，覆盖原生getDisplayMedia
const originalGetDisplayMedia = navigator.mediaDevices.getDisplayMedia;
navigator.mediaDevices.getDisplayMedia = async (constraints) => {
  console.log('当前网页发起屏幕共享请求');
  try {
    const stream = await originalGetDisplayMedia(constraints);
    // 监听共享结束事件
    stream.getTracks().forEach(track => {
      track.onended = () => {
        console.log('屏幕共享已结束');
        // 执行共享停止后的操作
      };
    });
    return stream;
  } catch (err) {
    console.log('共享请求被用户拒绝');
    throw err;
  }
};

需在manifest.json中配置目标网站的内容脚本权限：

"content_scripts": [
  {
    "matches": ["https://*.zoom.us/*", "https://meet.google.com/*", "https://*.teamviewer.com/*"],
    "js": ["content.js"],
    "run_at": "document_start"
  }
]

三、类似Netflix的共享限制逻辑实现 #

Netflix的全局黑屏依赖浏览器原生媒体保护机制，但Chrome扩展可实现更灵活的控制：
当检测到未授权的共享行为时，向目标标签页注入脚本修改页面状态：

// 背景脚本中触发，让页面视频变黑并暂停
chrome.tabs.executeScript(tabId, {
  code: `
    document.querySelectorAll('video').forEach(video => {
      video.style.filter = 'brightness(0)';
      video.pause();
    });
  `
});

也可通过chrome.webRequest拦截媒体请求，但需额外配置权限和规则。

四、必备权限说明 #

所有方案需在manifest.json中声明对应权限：

• tabCapture：监控标签页捕获状态
• desktopCapture：处理桌面媒体选择请求
• content_scripts：向目标网页注入脚本
• tabs：获取和操作标签页信息

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