Chrome扩展Manifest V3中FFMPEG.WASM的CSP与资源访问问题求助

核心问题分析 #

你的问题出在扩展资源访问权限配置错误和FFmpeg加载路径未正确指向扩展资源，同时CSP限制也阻止了wasm与worker的正常加载。以下是分步修复方案：

1. 修正manifest.json配置 #

调整web_accessible_resources

原配置中的extension_ids是用于允许其他扩展访问你的资源，而你需要让目标网站（erp.eloginweb.com）能访问扩展内的FFmpeg资源，因此要替换为matches匹配目标URL：

"web_accessible_resources": [
  {
    "resources": [
      "ffmpeg-core.js",
      "ffmpeg-core.wasm",
      "ffmpeg-core.worker.js"
    ],
    "matches": [
      "https://erp.eloginweb.com/StudentApp/Syllabus*"
    ]
  }
]

注意：确保这三个文件最终打包在扩展的根目录（或你指定的路径），如果使用构建工具（如Vite/Webpack），需要将@ffmpeg/core/dist下的文件复制到扩展输出目录。

更新content_security_policy

FFmpeg加载wasm和worker需要放宽部分CSP限制，添加unsafe-eval和blob:协议支持：

"content_security_policy": {
  "extension_pages": "script-src 'self' 'unsafe-eval'; object-src 'self'; media-src 'self' blob:",
  "sandbox": "script-src 'self' 'unsafe-eval' blob:; object-src 'self' blob:"
}

2. 修改Content.js中的FFmpeg加载逻辑 #

内容脚本运行在目标网站的环境中，无法直接访问扩展内的相对路径，必须用chrome.runtime.getURL()获取扩展资源的绝对URL：

import { createFFmpeg, fetchFile } from '@ffmpeg/ffmpeg';

async function initFFmpeg() {
  console.log("This is FFMPEG speaking!!!");
  // 获取扩展内FFmpeg核心文件的完整URL
  const corePath = chrome.runtime.getURL('ffmpeg-core.js');
  
  const ffmpeg = createFFmpeg({
    log: true,
    // 指定核心文件路径
    corePath: corePath
  });
  
  try {
    await ffmpeg.load();
    console.log("FFmpeg加载成功！");
  } catch (err) {
    console.error("FFmpeg加载失败：", err);
  }
}

initFFmpeg();

关键说明 #

• web_accessible_resources的matches必须精准匹配你要注入内容脚本的目标网站，否则目标页面无法读取扩展内的FFmpeg资源。
• unsafe-eval是FFmpeg wasm加载的必要配置，因为其内部会使用eval处理部分逻辑。
• 必须通过chrome.runtime.getURL()生成扩展资源的绝对路径，避免目标网站的路径解析错误。

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