Using WASM as a module in Manifest V3

This recipe shows how to use WASM in Manifest V3.

To load WASM in Manifest V3, we need to use the wasm-unsafe-eval CSP directive (Content Security Policy).

Overview

Running this extension

1. Clone this repository.
2. Load this directory in Chrome as an unpacked extension.
3. Find the extension named "WASM Load Example - Helloworld" and inspect the service worker.

You will see the following output:

[from wasm] Inited.
[from wasm] Hello World!
[from wasm] Hello John

Build WASM locally

We have already built the WASM file for you. If you want to build it yourself, follow the steps below.

1. Install Rust.

2. Install wasm-pack.

   bashCopy

   cargo install wasm-pack
   

3. Build WASM.

   bashCopy

   cd wasm
   wasm-pack build --target web
   

Implementation Notes

• To import the script generated by wasm-pack, we need to declare the service worker as an ES Module.

 // manifest.json
 ...
 "background": {
     "service_worker": "background.js",
+    "type": "module"
 },
 ...