Chrome扩展Manifest V3中tabCapture.capture调用报错求助

尝试捕获Chrome浏览器当前活跃标签页的音频，但在Manifest V3开发的扩展中，background.js内调用chrome.tabCapture.capture时出现错误：TypeError: Cannot read properties of undefined (reading 'capture')。控制台能正常获取活跃标签页，但后台脚本无法访问capture方法。

manifest.json 代码 #

{
  "name": "hola mundo",
  "version": "1.0.0",
  "description": "translate ",
  "manifest_version": 3,
  "author": "yo",
  "action": {
    "default_popup": "index.html",
    "default_title": "translate index"
  },
  "host_permissions": [
    "https://*/"
  ],
  "background": {
    "service_worker": "background.js"
  },
  "permissions": [
    "tabs",
    "tabCapture",
    "activeTab",
    "downloads",
    "storage",
    "scripting"
  ]
}

background.js 代码 #

chrome.runtime.onMessage.addListener((request, sender, sendResponse) => {
    console.log(request)
    startCapture()
  });
  const startCapture = function() {
    chrome.tabs.query({active: true, currentWindow: true}, (tabs) => {
      console.log("tabs",tabs)
      idTab = tabs[0].id
      chrome.storage.sync.get({
        maxTime: 1200000,
        muteTab: false,
        format: "mp3",
        quality: 192,
        limitRemoved: false
      }, (options) => {
        let time = options.maxTime;
        if(time > 1200000) {
          time = 1200000
        }
        chrome.tabCapture.capture(
          {
            audio: true
          },
          (stream) => {
              console.log(stream)
          }
        )
      });
    });
  };

控制台日志 #

chrome-extension://cnmcidbjhkbfbgngfefepkldjplnogpa/options.html
tabs [{…}]0: {active: true, audible: false, autoDiscardable: true, discarded: false, groupId: -1, …}length: 1[[Prototype]]: Array(0)
Error handling response: TypeError: Cannot read properties of undefined (reading 'capture')

• 核心原因：Manifest V3中，chrome.tabCapture API无法在后台Service Worker中使用，该API需要关联有用户交互的上下文（如弹窗、内容脚本或离屏文档），而Service Worker是无界面的后台脚本，不具备此运行环境。

方案1：在Popup页面中调用tabCapture #

将捕获逻辑从background.js迁移到Popup对应的JS文件中：

1. 修改Popup的index.html，引入脚本文件：

<script src="popup.js"></script>

2. 编写popup.js：

// 页面加载完成后触发捕获
document.addEventListener('DOMContentLoaded', () => {
  startCapture();
});

const startCapture = function() {
  chrome.tabs.query({active: true, currentWindow: true}, (tabs) => {
    console.log("tabs", tabs);
    chrome.storage.sync.get({
      maxTime: 1200000,
      muteTab: false,
      format: "mp3",
      quality: 192,
      limitRemoved: false
    }, (options) => {
      let time = options.maxTime;
      if(time > 1200000) {
        time = 1200000;
      }
      chrome.tabCapture.capture(
        { audio: true },
        (stream) => {
          console.log(stream);
          // 在此处处理音频流，如录制、转码等操作
        }
      );
    });
  });
};

方案2：使用离屏文档（Offscreen Document） #

如果需要在后台执行捕获逻辑且不依赖Popup，可使用Manifest V3的离屏文档：

1. 在manifest.json中添加离屏文档配置：

"offscreen": {
  "matches": ["<all_urls>"],
  "default_path": "offscreen.html"
}

2. 创建offscreen.html：

<!DOCTYPE html>
<html>
<body>
  <script src="offscreen.js"></script>
</body>
</html>

3. 编写offscreen.js：

chrome.runtime.onMessage.addListener((msg, sender, sendResponse) => {
  if(msg.action === 'startCapture') {
    chrome.tabCapture.capture({ audio: true }, (stream) => {
      console.log(stream);
      // 如需将结果传递给后台，可通过消息通信
      chrome.runtime.sendMessage({type: 'captureResult', streamId: stream.id});
    });
  }
});

4. 修改background.js，调用离屏文档触发捕获：

chrome.runtime.onMessage.addListener(async (request, sender, sendResponse) => {
  if(request.action === 'initCapture') {
    // 创建离屏文档
    await chrome.offscreen.createDocument({
      url: 'offscreen.html',
      reasons: ['AUDIO_CAPTURE'],
      justification: '捕获标签页音频'
    });
    // 向离屏文档发送消息启动捕获
    chrome.runtime.sendMessage({action: 'startCapture'});
  }
});

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