1

I have been playing about with chrome extensions and web assembly, both of which I know very little about. I am looking to create an extension which does image manipulation which in the end generates 'video' (Series of image frames drawn using the HTML canvas element).

What I would like to do is have the content part of a web extension to

  1. Inject a wasm function onto the webpage
  2. Collect image information and pass to wasm function
  3. Process images on website to create 'video' (Details not important)
  4. Place 'video' back on the website by passing data back to page and onto the HTML canvas

However some websites block this with the error:

Uncaught (in promise) CompileError: WebAssembly.instantiate(): Wasm code generation disallowed by embedder

From research this seems to be due to CSP headers on the website which I will not be able to change.

Is this true? Is there anyway round this? If not, why can I run arbitrary js but not wasm?

An alternative is to get the images on the webpage and send them to the background script running in the chrome extension, which would then process the images using wasm, then forwarding any output of 'video' back to the content script to draw on the webpage.

However, I don't think you can do that level of communication between the content and background scripts in a chrome extension so this way also does not seem to work.

Anyone done something similar and know a way around this? Thanks in advance.

mortonprod
  • 183
  • 3
  • 13
  • Add an iframe with a chrome-extension:// page inside ([example](/a/25100953)) so it has its own CSP, then run wasm inside. – wOxxOm Apr 01 '22 at 05:30
  • I had a look at this but was not sure if this was the right way. So the iframe would be in the background script but embedded in the webpage. Nice. The only issue I can see with this is if there are some restrictions on some webpages to embed an iframe. I know there are headers to restrict a webpage being embedded in an iframe but is there anything stopping an iframe being used in an arbitrary website. – mortonprod Apr 01 '22 at 06:48
  • The iframe will be inside the web page, not inside the background script, but it'll have the same capabilities. The iframe is added regardless of site's CSP in Chrome/Chromium, not in Firefox though. – wOxxOm Apr 01 '22 at 08:09
  • Thank you that worked as expected! One thing I don't get is if this iframe.js is working in the content or background context? It looks like it runs in the content context of the website since I can see the wasm log in the main chrome dev tool of the website and not the background part of the extension. But this can't be right since wasm is working in all the webpages that has issues before so must be the background. Is this just a feature of iframes which will log to the main chrome dev tool console even if it runs in the background? – mortonprod Apr 01 '22 at 10:40
  • The iframe is added to the tab, not to the background script. It runs in its own context, just like any iframe. The only difference is that it has a special chrome-extension:// URL which is why it has access to the entire `chrome` API. – wOxxOm Apr 01 '22 at 14:10
  • Thanks again. I got it working as you said. I was just misunderstanding the content to background to iframe communication. You are a lifesaver! Thanks very much. Without your help I would have been stuck trying to working out how to do this and even what the best way was. – mortonprod Apr 01 '22 at 22:55

0 Answers0