ffmpeg.wasm with Chrome Extension Manifest v3

[Yharooer]

I've been trying to get ffmpeg.wasm working on a chrome extension with manifest v3. Due to content security policy, I think I have to run ffmpeg.wasm from within a sandbox so I can add 'unsafe-inline and 'unsafe-eval to the CSP. I have my sandbox running inside an iframe. Does anyone know the required set up to get ffmpeg.wasm running on manifest v3?

I tried to load ffmpeg.wasm using

this.ffmpeg = createFFmpeg({
      log: true,
      progress: ({ ratio }) => this.currentCommandProgress = ratio,
      corePath: chrome.runtime.getURL('vendor/ffmpeg-core.js')
});

but then on ffmpeg.load() I get the following error three times:

Refused to load the script 'blob:chrome-extension://diioffcnlajbdneklmoocdmpcjblgnjk/62c5caf4-a2a0-473c-bd5e-8a263164d755' because it violates the following Content Security Policy directive: "script-src 'self'"

I tried to change the CSP settings using the csp attribute on the iframe element and I added blob:. However then instead of seeing the above message three times, now I only see it two times. Does anyone know if I am missing setting the CSP somewhere?

I can get around this by adding this to the following to my html:

<script src="/vendor/ffmpeg-core.js"></script>

If I add this it seems to load successfully, however then I get the following error:

Uncaught (in promise) RuntimeError: abort(CompileError: WebAssembly.instantiate(): Wasm code generation disallowed by embedder). Build with -s ASSERTIONS=1 for more info.

I've tried adding unsafe-eval and wasm-eval to the csp attribute on the iframe but I had no luck. I also tried adding these to the CSP in manifest.json but again I wasn't about to change anything.

I have the feeling I'm not setting the CSP correctly in the right places. Has anyone had any luck getting ffmpeg.wasm on manifest v3 or does anyone have any insights?

Any help or insight would be much appreciated; I've been struggling with this for a while.

[brunoluiz]

I guess is not related to this project itself, but Chromium. I've ended up with a similar message in this toy project of mine and I found this: https://bugs.chromium.org/p/chromium/issues/detail?id=1173354

The good thing is that it is being actively looked at 👀

[blujedis]

well crap lol, just tinkering with this - same behavior you both are seeing.

[Animeshz]

Same, here too, that issue is active for more than a year now :(

[rsclip]

Half a year later and nothing still?

[WofWca]

Not nothing, they have allowed wasm-unsafe-eval. See @Aniny21 's response below on how to use it.

[eklatzer]

Hey @brunoluiz @blujedis @Animeshz @Cyclip @Yharooer, did anyone of you find a fix for the problem? We tried it using the following CSP:

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

This leads to the error:

Failed to load extension from: <path-to-extension>/build. 'content_security_policy.extension_pages': Insecure CSP value "blob" in directive 'script-src'.

Help would be appreciated

[WofWca]

Firstly, your CSP string is formatted incorrectly, it ought to be "script-src 'self' blob: 'wasm-unsafe-eval'; object-src 'self';" I think.

Secondly yes, blob: is not allowed, but you don't need this. See @Aniny21 's response below.

You want to make sure to pass

coreURL: './ffmpeg-core.js',
wasmURL: './ffmpeg-core.wasm',

and not use toBlobURL, which, as the docs state, is only to bypass CSP + CDN issues.

[Aniny21]

I have been trying to get ffmpeg to work with Manifest V3 for some time, and recently I have succeeded in getting it to work anyway.
If you are interested, please refer to the following repository.
https://github.com/Aniny21/browser-extension-ffmpeg

The CSP settings in Manifest V3 are as follows:

"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';"
}

[patrickmatte]

Thank for sharing that! I was able to use a part of your code and made it work with tabCapture inside the manifest V3 offscreen page instead of the options page.

[WofWca]

So, the key part is adding 'wasm-unsafe-eval'. In the future 'wasm-eval' might be sufficient.

[jwmeidinger]

Anyone have an example of doing this in a worker? When running this in my implementation the screen freezes

[FoxRefire]

Anyone have an example of doing this in a worker? When running this in my implementation the screen freezes

In Chromium, you need to use the chrome.offscreen API.

If you want your extension to be compatible with both Chromium and Firefox, check whether chrome.offscreen is defined, and only run ffmpeg processing if it is not defined.

If you want to see a working example, you can take a look at the code for an extension I'm developing.
https://github.com/FoxRefire/ByeByeEXIF/blob/main/utils/cleanByFFmpeg.js