Service worker unable to initialize a wasm instance from base64 encoded url

[Asuka109]

I am trying to build a Chrome browser extension based on the Manifest V3 API for Harper. I encountered some issues when instantiating the Linter in the service worker:

• WorkerLinter doesn't work because the service worker cannot initialize a web worker.
• LocalLinter cannot load wasm through blob URLs or base64 encoded URLs because this does not meet the security requirements of Manifest V3.

According to Chrome's requirements, the wasm module should be bundled and distributed as a separate file along with the service worker and all other assets.

[elijah-potter]

Hey @Asuka109, thanks for opening this! I am thrilled to hear that you're working on a Chrome extension, and I want to help however I can.

Before I can draft a fix, I need some information to know it will work.

Could you provide a screenshot of the error (it sounds similar to #338) and whatever source code you have for your extension so far? I want to be able to test against it while I'm working on a solution.

We'll get you unblocked in a jiffy. Thanks again for reaching out!

[Asuka109]

@elijah-potter Thank you! I will working on an e2e case to reproduce the issue.

[Asuka109]

I was try to repro this issue by writing a vitest case. But finally I gave up since it's so difficult to test a browser extension.

...So here is the repro repository: https://github.com/Asuka109/repro-harper-service-worker-cors
You can just clone the repository and follow the steps below:

> pnpm install
> pnpm playwright install
> pnpm build
> pnpm launch

It will launch a browser instance with the extension loaded. You can go to chrome://extensions/ and click the "inspect view of service worker" button, and open any website in a new tab. So that you can the error below:

service.js:527 Uncaught (in promise) CompileError: WebAssembly.instantiateStreaming(): Refused to compile or instantiate WebAssembly module because neither 'wasm-eval' nor 'unsafe-eval' is an allowed source of script in the following Content Security Policy directive: "script-src 'self'"
    at cA (service.js:527:38)
    at Module.j [as default] (service.js:682:46)
    at async W (service.js:709:12)
    at async WA.initialize (service.js:719:23)
    at async WA.lint (service.js:727:16)
    at async handleLintMessage (service.js:948:19)
cA @ service.js:527
j @ service.js:682
await in j
W @ service.js:709
await in W
initialize @ service.js:719
lint @ service.js:727
handleLintMessage @ service.js:948

[Asuka109]

I am much more fimilar with webpack-based build tools. I will try to bundle the harper.js by using rslib.

[Asuka109]

@elijah-potter Perhaps we can provide both the data URI and the url of a separated file as different exports. It would look like this:

src/binary.ts

export { default as inlinedBinary } from 'wasm/harper_wasm_bg.wasm?inline';
export { default as binary } from 'wasm/harper_wasm_bg.wasm?url';

Next, we should modify the Linter constructor to accept a binary parameter, allowing users to configure it on their own.

import { WorkerLinter } from 'harper.js';
import { binary } from 'harper.js/binary';

const linter = new WorkerLinter({ binary }); // Alternatively, use `inlinedBinary`.

Since Vite does tree shaking well, any unused binary exports will be removed.

Feel free to assign this to me if it sounds good to you!

[elijah-potter]

That sounds like good solution. Go right on ahead!

Don't be afraid to reach out here or on the Discord server if there are any questions you have.

[elijah-potter]

For reference: #607 seems to be where this is being worked on.