Chrome扩展MV3中getUserMedia调用报错与权限异常求助

核心问题拆解 #

• Service Worker无媒体API：Chrome扩展MV3的后台是Service Worker环境，不存在浏览器端的navigator.mediaDevices接口，直接在background.js中调用会触发navigator未定义/getUserMedia不存在的错误。
• 嵌入iframe权限不足：扩展页面嵌入第三方网页时，iframe的权限策略配置不全，导致getUserMedia被拒绝。
• 脚本注入范围错误：chrome.tabs.onUpdated会触发所有标签页（包括chrome://开头的系统页面），这类页面无法注入content script，因此报错。

修复步骤 #

1. 重构后台脚本逻辑 #

修改background.js，移除Service Worker中不支持的媒体API调用，同时过滤无法注入脚本的系统页面：

chrome.tabs.onUpdated.addListener(function (tabId, changeInfo, tab) {
  // 仅在普通HTTP/HTTPS页面完成加载且激活时注入脚本
  if (changeInfo.status === 'complete' && tab.active && !tab.url.startsWith('chrome://')) {
    chrome.scripting.executeScript({
      target: { tabId: tabId },
      files: ['content-script.js']
    });
  }
})

chrome.runtime.onMessage.addListener(gotMessage);

function gotMessage(message) {
  if(message.from === 'success') {
    // Service Worker无法处理媒体流，此处仅做消息响应或移除该逻辑
    console.log('收到iframe权限获取成功通知');
  }
}

2. 修复iframe权限配置 #

更新content-script.js中的iframe属性，补充完整的媒体权限与沙箱策略：

function embedFrame() {
  var iframe = document.createElement('iframe');
  iframe.src = chrome.runtime.getURL('frame.html');
  // 明确允许麦克风权限
  iframe.setAttribute('allow', 'microphone;');
  // 配置沙箱策略，确保iframe脚本可正常执行
  iframe.setAttribute('sandbox', 'allow-scripts allow-same-origin');
  document.body.appendChild(iframe);
}

embedFrame();

3. 优化iframe内的逻辑 #

调整frame.js，简化消息发送逻辑，并在权限获取成功后通知后台：

const getAccessBtn = document.getElementById("getaccess");
const msgBackgroundBtn = document.getElementById("msgbackground");

getAccessBtn.addEventListener("click", () => {
  navigator.mediaDevices.getUserMedia({
    audio: { echoCancellation: true }
  })
  .then(stream => {
    console.log('麦克风权限获取成功:', stream);
    // 权限获取成功后主动通知后台
    chrome.runtime.sendMessage({ from: 'success' });
  })
  .catch(err => console.error('权限获取失败:', err));
});

msgBackgroundBtn.addEventListener("click", () => {
  // 无需指定扩展ID，直接发送消息
  chrome.runtime.sendMessage({ from: 'success' });
});

验证场景 #

1. 打开普通HTTP/HTTPS网页，iframe会自动嵌入页面
2. 点击getaccess按钮，可正常弹出麦克风权限请求，获取成功后控制台会输出日志
3. 点击msgbackground按钮，后台可正常接收消息，无navigator相关错误
4. chrome://系统页面不会触发脚本注入，避免权限报错

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