Chrome扩展迁移ffmpeg.wasm v12后Worker构造失败问题求助

问题根源 #

在Content Script上下文（reddit.com域名环境）中，ffmpeg.wasm v12默认会错误地将Worker脚本路径解析为当前网页域名下的资源（比如redditstatic.com），触发浏览器跨域限制。而扩展弹窗/选项页能正常运行，是因为它们处于**chrome-extension://**自身域名环境，不存在跨域问题。

解决方案 #

1. 配置扩展资源可访问权限 #

在manifest.json中添加web_accessible_resources，允许Content Script访问扩展内的ffmpeg相关文件：

{
  "web_accessible_resources": [
    {
      "resources": ["lib/ffmpeg/umd/*.js", "lib/ffmpeg/umd/*.wasm"],
      "matches": ["https://www.reddit.com/*"]
    }
  ]
}

2. 显式指定Worker的正确路径 #

初始化ffmpeg时，用chrome.runtime.getURL()生成扩展内资源的绝对URL，传入ffmpeg.load()的配置参数中：

import { createFFmpeg } from './lib/ffmpeg/umd/ffmpeg.js';

const ffmpeg = createFFmpeg({ log: true });

// 获取扩展内ffmpeg相关Worker的绝对URL
const workerURL = chrome.runtime.getURL('lib/ffmpeg/umd/ffmpeg-worker.js');
const worker814URL = chrome.runtime.getURL('lib/ffmpeg/umd/814.ffmpeg.js');
const classWorkerURL = chrome.runtime.getURL('lib/ffmpeg/umd/ffmpeg-class-worker.js');

// 加载时显式传入所有Worker路径
await ffmpeg.load({
  workerURL,
  worker814URL,
  classWorkerURL
});

3. 确认文件路径匹配 #

确保你传入的路径和扩展内实际的文件结构完全一致，比如如果814.ffmpeg.js确实在lib/ffmpeg/umd/目录下，就沿用示例中的路径。

关键说明 #

• 之前尝试失败大概率是因为直接使用相对路径，Content Script会将其解析为当前网页（reddit.com）的路径，而非扩展本地路径；chrome.runtime.getURL()能生成正确的chrome-extension://开头的绝对URL。
• 必须配置web_accessible_resources，否则即使路径正确，浏览器也会拦截Content Script对扩展内资源的访问请求。

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