Using WebAssembly in content scripts

[Colorgram]

Hey there,

I'm using WebAssembly.instantiateStreaming() in a content script and it's failing on websites with restrictive CSP policies (eg. Github). It gives me the following error:

I've added this section to my MV3 without success:

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

I also tried to use chrome.declarativeNetRequest.updateDynamicRules to relax CSP policies for the main frame, without success either.

I don't know if it's relevant, but I'm injecting the content script using await chrome.scripting.executeScript and I then dynamically import the actual script using a dynamic import (to benefit from ES modules):

// main.ts

;(async () => {
  await import(/* @vite-ignore */ './content')
})()

// content.ts

import init from 'my-wasm-module'

await init()

I'm not exactly sure how to fix this issue. Do you know what I'm missing? Thanks!

[wOxxOm]

Add an iframe to the web page and point its src to an html page in your extension exposed via web_accessible_resources, then use WASM inside.

[Colorgram]

Thanks! It did resolve the initial issue, creating another one.

Because I'm moving code that needs to access the main frame's DOM, I now have a cross origin issue when trying to access window.parent.document.

I could use message passing to the parent script (the one injected in the main frame) but this would introduce a good share of complexity.

Do you know of a way to access the parent frame's document?

Thanks!

[wOxxOm]

There's no way because the documents are cross-origin, so you'll need to use messaging.

[Colorgram]

Ok I see... Thanks for the help!