Firefox扩展popup.js调用getDisplayMedia()遭权限拒绝问题求助

问题核心原因 #

Firefox的安全机制严格限制：getDisplayMedia()必须在用户交互直接触发的顶层浏览上下文中调用。扩展的popup属于嵌套浏览上下文，即便绑定按钮点击事件也不符合要求；而通过sendMessage触发内容脚本调用，会丢失原始用户交互上下文，同样会被拦截。另外，popup的moz-extension://协议属于浏览器信任的安全上下文，HTTPS限制并非问题根源。

可行解决方案 #

方案1：通过executeScript向标签页注入即时执行脚本

利用popup按钮点击的用户交互权限，直接向当前激活标签页注入脚本并执行getDisplayMedia()，此时调用会继承原始交互上下文的授权：

popup.js 代码示例：

document.getElementById('recordBtn').addEventListener('click', async () => {
  try {
    // 获取当前激活标签页
    const [tab] = await browser.tabs.query({ active: true, currentWindow: true });
    // 注入并执行媒体捕获脚本
    const streamResult = await browser.tabs.executeScript(tab.id, {
      code: `
        navigator.mediaDevices.getDisplayMedia({
          audio: true, // 按需开启音频捕获
          video: false // 仅需音频时设为false，反之调整
        });
      `,
      async: true // 让脚本返回Promise结果
    });
    // 处理获取到的媒体流
    const mediaStream = streamResult[0];
    console.log('成功捕获媒体流:', mediaStream);
  } catch (err) {
    console.error('捕获失败:', err);
  }
});

manifest.json 权限配置：
确保添加必要权限（manifest v2/v3通用，v3需调整部分字段）：

{
  "manifest_version": 2,
  "name": "媒体捕获扩展",
  "version": "1.0",
  "permissions": [
    "activeTab",
    "tabs",
    "desktopCapture" // 核心权限，用于捕获屏幕/标签页媒体
  ],
  "browser_action": {
    "default_popup": "popup.html"
  }
}

方案2：创建独立扩展页面触发捕获

在popup点击时打开一个由扩展托管的顶层页面，在该页面中绑定按钮点击事件调用getDisplayMedia()，完全符合用户交互触发的顶层上下文要求：

1. 新增record.html页面：

<!DOCTYPE html>
<html>
<body>
  <button id="startCapture">开始捕获音频</button>
  <script src="record.js"></script>
</body>
</html>

2. record.js 代码：

document.getElementById('startCapture').addEventListener('click', async () => {
  try {
    const stream = await navigator.mediaDevices.getDisplayMedia({
      audio: true,
      video: false
    });
    console.log('捕获成功:', stream);
    // 后续可将流传递到后台脚本或进行处理
  } catch (err) {
    console.error('捕获失败:', err);
  }
});

3. popup.js 触发页面打开：

document.getElementById('recordBtn').addEventListener('click', () => {
  browser.windows.create({
    url: browser.runtime.getURL('record.html'),
    type: 'popup',
    width: 300,
    height: 200
  });
});

关键注意事项 #

• 必须添加desktopCapture权限，否则无法发起媒体捕获请求。
• 避免通过异步消息传递间接触发getDisplayMedia()，这种方式会丢失用户交互上下文的授权。

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