Chrome 扩展清单版本 3 中的 FFMPEG.WASM：CSP、web_accessible_resources 问题

Question

我正在创建一个 Chrome 扩展程序，

我的Content.js，如果发现url为：“https://erp.eloginweb.com/StudentApp/Syllabus?v=90”，则会执行该内容

import { createFFmpeg, fetchFile } from '@ffmpeg/ffmpeg'
async function ffmpeg() {
    console.log("This is FFMPEG speaking!!!");
    const ffmpeg = createFFmpeg({ log: true });
    await ffmpeg.load();
}
ffmpeg();

现在，当我打开“https://erp.eloginweb.com/StudentApp/Syllabus?v=90”时，按预期执行 content.js，但 FFMPEG 无法加载并出现以下错误：

虽然我确实尝试了很多方法来解决这个问题，但我仍然对 CSP 和 web_accessible_resources 很菜鸟，一些帮助将非常感激

我尝试添加 csp 和 web_accessible_resources 如下：

"web_accessible_resources": [
        {
            "resources": ["node_modules/@ffmpeg/core/dist/ffmpeg-core.js", "node_modules/@ffmpeg/core/dist/ffmpeg-core.wasm", "node_modules/@ffmpeg/core/dist/ffmpeg-core.worker.js"],
            "extension_ids": ["liddjnldemgkpaadhmggbmahbhgocfee"]
        }
    ],
    "content_security_policy": {
        "extension_pages": "script-src 'self'; object-src 'self'"
    }

我尝试了很多不同的组合，但没有成功，我们将非常感谢一些帮助

Answer 1

我创建了一个让 ffmpeg 在“选项”页面上工作的简单示例。
我不知道这是否会直接帮助您，但如果您有兴趣，请参阅下面的存储库。
https://github.com/Aniny21/browser-extension-ffmpeg

为此的 CSP 设置如下：

"content_security_policy": {
    "extension_pages": "script-src 'self' 'wasm-unsafe-eval'; object-src 'self';",
    "sandbox": "sandbox allow-scripts allow-forms allow-popups allow-modals; script-src 'self' 'unsafe-inline' 'unsafe-eval' 'wasm-unsafe-eval'; child-src 'self';"
}