-
-
Couldn't load subscription status.
- Fork 1k
-
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.
Beta Was this translation helpful? Give feedback.
All reactions
Replies: 3 comments 9 replies
-
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 👀
Beta Was this translation helpful? Give feedback.
All reactions
-
well crap lol, just tinkering with this - same behavior you both are seeing.
Beta Was this translation helpful? Give feedback.
All reactions
-
Same, here too, that issue is active for more than a year now :(
Beta Was this translation helpful? Give feedback.
All reactions
-
😕 1
-
Half a year later and nothing still?
Beta Was this translation helpful? Give feedback.
All reactions
-
😕 1
-
Not nothing, they have allowed wasm-unsafe-eval. See @Aniny21 's response below on how to use it.
Beta Was this translation helpful? Give feedback.
All reactions
-
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
Beta Was this translation helpful? Give feedback.
All reactions
-
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.
Beta Was this translation helpful? Give feedback.
All reactions
-
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';" }
Beta Was this translation helpful? Give feedback.
All reactions
-
👍 3 -
😄 1 -
❤️ 3 -
🚀 2
-
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.
Beta Was this translation helpful? Give feedback.
All reactions
-
👍 2
-
So, the key part is adding 'wasm-unsafe-eval'. In the future 'wasm-eval' might be sufficient.
Beta Was this translation helpful? Give feedback.
All reactions
-
Anyone have an example of doing this in a worker? When running this in my implementation the screen freezes
Beta Was this translation helpful? Give feedback.
All reactions
-
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
Beta Was this translation helpful? Give feedback.