Chrome MV3扩展中WebTorrent流处理报错：No server created解决咨询

我用Vite+Vue构建Chrome MV3扩展，集成WebTorrent库时遇到问题：能正常生成磁力链接、打印文件信息，但无法流式传输文件。控制台报错：

index-DcFS_qW1.js:1 Uncaught (in promise) Error: No server created
    at get streamURL (index-DcFS_qW1.js:1:166925)
    ...
WebSocket connection to 'wss://tracker.btorrent.xyz/' failed

查阅WebTorrent文档得知需要用Service Worker，Chrome MV3虽自动注册Service Worker，但当前代码没正确配置。

现有代码：

Vue组件代码 #

import WebTorrent from 'webtorrent/dist/webtorrent.min.js';

const client = new WebTorrent(); 

// 这部分正常工作
watch([enableVideoShare], () => {
  console.log(enableVideoShare.value);
  if(enableVideoShare.value){
    client.seed(file.value, (torrent) => {
      console.log(torrent)
      outcomingMagnetURI.value = torrent.magnetURI;
    });
  }
});

后台Service Worker代码 #

import WebTorrent from 'webtorrent/dist/webtorrent.min.js'; 

console.log('hello world from background');

chrome.action.onClicked.addListener((tab) => {
  console.log('tab info', tab);
  chrome.tabs.create({
    active: true,
    url: chrome.runtime.getURL('src/new-tab/index.html')
  });
});

self.onerror = function (message, source, lineno, colno, error) {
  console.info(
    `Error: ${message}\nSource: ${source}\nLine: ${lineno}\nColumn: ${colno}\nError object: ${error}`
  )
}

export {}

1. 把WebTorrent实例移到Service Worker中 #

Chrome MV3的内容脚本/页面环境限制较多，WebTorrent的流式传输依赖逻辑必须放在Service Worker里运行。修改后台脚本：

import WebTorrent from 'webtorrent/dist/webtorrent.min.js';

const client = new WebTorrent();
let activeTorrent = null;

// 监听来自Vue页面的消息
self.addEventListener('message', async (event) => {
  const { type, payload } = event.data;
  switch(type) {
    case 'SEED_FILE':
      // 种子文件并返回磁力链接
      client.seed(payload.file, (torrent) => {
        activeTorrent = torrent;
        event.source.postMessage({
          type: 'SEED_SUCCESS',
          payload: { magnetURI: torrent.magnetURI }
        });
        // 监听文件块完成事件，用于流式传输准备
        torrent.on('piece done', (index) => {
          event.source.postMessage({
            type: 'PIECE_DONE',
            payload: { index }
          });
        });
      });
      break;
    case 'GET_STREAM_URL':
      // 生成流式传输URL（用Blob URL替代WebTorrent默认的streamURL）
      if (activeTorrent) {
        const file = activeTorrent.files[0];
        const blob = await file.getBlob();
        const streamUrl = URL.createObjectURL(blob);
        event.source.postMessage({
          type: 'STREAM_URL_READY',
          payload: { streamUrl }
        });
      }
      break;
  }
});

chrome.action.onClicked.addListener((tab) => {
  chrome.tabs.create({
    active: true,
    url: chrome.runtime.getURL('src/new-tab/index.html')
  });
});

self.onerror = function (message, source, lineno, colno, error) {
  console.info(
    `Error: ${message}\nSource: ${source}\nLine: ${lineno}\nColumn: ${colno}\nError object: ${error}`
  )
}

export {}

2. 修改Vue组件代码，通过消息与Service Worker通信 #

移除组件内的WebTorrent实例，改用Chrome消息API和后台交互：

import { watch, ref } from 'vue';

const enableVideoShare = ref(false);
const file = ref(null);
const outcomingMagnetURI = ref('');
const streamUrl = ref('');

// 监听后台消息
chrome.runtime.onMessage.addListener((message) => {
  switch(message.type) {
    case 'SEED_SUCCESS':
      outcomingMagnetURI.value = message.payload.magnetURI;
      break;
    case 'STREAM_URL_READY':
      streamUrl.value = message.payload.streamUrl;
      // 可将streamUrl绑定到video/audio标签的src属性实现流式播放
      break;
  }
});

watch([enableVideoShare], () => {
  if(enableVideoShare.value && file.value){
    // 向后台发送种子文件请求
    chrome.runtime.sendMessage({
      type: 'SEED_FILE',
      payload: { file: file.value }
    });
  }
});

// 需要流式传输时调用此方法
const getStream = () => {
  chrome.runtime.sendMessage({ type: 'GET_STREAM_URL' });
};

3. 解决WebSocket tracker连接失败问题 #

Chrome MV3默认限制部分网络请求，需在manifest.json中添加权限：

{
  "permissions": ["activeTab", "storage", "scripting"],
  "host_permissions": [
    "wss://*/*",
    "ws://*/*"
  ],
  "background": {
    "service_worker": "src/background/index.js"
  },
  // 其他配置项...
}

4. 关键注意事项 #

• WebTorrent在Service Worker中运行时，无需使用时要调用client.destroy()销毁实例，避免占用资源
• 用Blob URL替代WebTorrent默认的streamURL，因为Chrome扩展环境不允许创建HTTP服务器
• 确保文件对象正确传递，Chrome消息API会自动处理Blob类型的序列化

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