Add wasm sample

functional-samples/cookbook.wasm-helloworld-print-nomodule/README.md

@@ -0,0 +1,42 @@
+# WASM HelloWorld Demo
+
+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][0]).
+
+## Running this extension
+
+1. Clone this repository.
+2. Load this directory in Chrome as an [unpacked extension][1].
+3. Find the extension named "WASM Load Example - Helloworld (no-module)" and open console panel of the background service worker.
+
+You will see the following output:
+
+```
+[from wasm] Inited.
+[from wasm] Hello World!
+[from wasm] Hello John
+[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](https://www.rust-lang.org/install.html).
+
+2. Install [wasm-pack](https://rustwasm.github.io/wasm-pack/installer/).
+
+   ```bash
+   cargo install wasm-pack
+   ```
+
+3. Build WASM.
+
+   ```bash
+   cd wasm
+   wasm-pack build --target no-modules
+   ```
+
+[0]: https://developer.chrome.com/docs/extensions/mv3/mv3-migration/#content-security-policy
+[1]: https://developer.chrome.com/docs/extensions/mv3/getstarted/development-basics/#load-unpacked

functional-samples/cookbook.wasm-helloworld-print-nomodule/background.js

@@ -0,0 +1,16 @@
+/* eslint-disable no-undef */
+
+importScripts('./wasm/pkg/helloworld_demo.js');
+
+chrome.runtime.onInstalled.addListener(() => {
+  runDemo();
+});
+
+async function runDemo() {
+  // Initialize the WASM module
+  await wasm_bindgen('./wasm/pkg/helloworld_demo_bg.wasm');
+
+  // Call the exported functions from the WASM module
+  wasm_bindgen.print();
+  wasm_bindgen.print_with_value('John');
+}

functional-samples/cookbook.wasm-helloworld-print-nomodule/manifest.json

@@ -0,0 +1,12 @@
+{
+  "name": "WASM Load Example - Helloworld (no-module)",
+  "version": "1.0",
+  "manifest_version": 3,
+  "description": "Inspect background service worker console for output",
+  "background": {
+    "service_worker": "background.js"
+  },
+  "content_security_policy": {
+    "extension_pages": "default-src 'self' 'wasm-unsafe-eval'"
+  }
+}

functional-samples/cookbook.wasm-helloworld-print-nomodule/wasm/.gitignore

@@ -0,0 +1 @@
+target

functional-samples/cookbook.wasm-helloworld-print-nomodule/wasm/Cargo.toml

@@ -0,0 +1,11 @@
+[package]
+name = "helloworld-demo"
+version = "0.1.0"
+edition = "2021"
+
+[lib]
+crate-type = ["cdylib"]
+
+[dependencies]
+wasm-bindgen = "0.2.84"
+web-sys = { version = "0.3.61", features = ['console'] }

functional-samples/cookbook.wasm-helloworld-print-nomodule/wasm/src/lib.rs

@@ -0,0 +1,25 @@
+extern crate wasm_bindgen;
+
+use wasm_bindgen::prelude::*;
+use web_sys::console;
+
+// will be called when the wasm module is loaded
+// https://rustwasm.github.io/docs/wasm-bindgen/reference/attributes/on-rust-exports/start.html
+#[wasm_bindgen(start)]
+pub fn main() {
+    console::log_1(&"[from wasm] Inited.".into());
+}
+
+#[wasm_bindgen]
+pub fn print() {
+    console::log_1(&"[from wasm] Hello World!".into());
+}
+
+#[wasm_bindgen]
+pub fn print_with_value(value: &str) {
+    // with format! macro
+    console::log_1(&format!("[from wasm] Hello {}", value).into());
+
+    // with 2-args log function
+    console::log_2(&"[from wasm] Hello ".into(), &value.into());
+}

functional-samples/cookbook.wasm-helloworld-print/README.md

@@ -0,0 +1,57 @@
+# WASM HelloWorld Demo
+
+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][0]).
+
+## Running this extension
+
+1. Clone this repository.
+2. Load this directory in Chrome as an [unpacked extension][2].
+3. Find the extension named "WASM Load Example - Helloworld" and open console panel of the background service worker.
+
+You will see the following output:
+
+```
+[from wasm] Inited.
+[from wasm] Hello World!
+[from wasm] Hello John
+[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](https://www.rust-lang.org/install.html).
+
+2. Install [wasm-pack](https://rustwasm.github.io/wasm-pack/installer/).
+
+   ```bash
+   cargo install wasm-pack
+   ```
+
+3. Build WASM.
+
+   ```bash
+   cd wasm
+   wasm-pack build --target web
+   ```
+
+## Notes
+
+- To import the script generated by `wasm-pack`, we need to [declare the service worker as an ES Module][1].
+
+```diff
+ // manifest.json
+ ...
+ "background": {
+     "service_worker": "background.js",
++    "type": "module"
+ },
+ ...
+```
+
+[0]: https://developer.chrome.com/docs/extensions/mv3/mv3-migration/#content-security-policy
+[1]: https://developer.chrome.com/docs/extensions/mv3/mv3-migration/#man-sw
+[2]: https://developer.chrome.com/docs/extensions/mv3/getstarted/development-basics/#load-unpacked

functional-samples/cookbook.wasm-helloworld-print/background.js

@@ -0,0 +1,14 @@
+import init, { print, print_with_value } from './wasm/pkg/helloworld_demo.js';
+
+chrome.runtime.onInstalled.addListener(() => {
+  runDemo();
+});
+
+async function runDemo() {
+  // Initialize the WASM module
+  await init();
+
+  // Call the exported functions from the WASM module
+  print();
+  print_with_value('John');
+}

functional-samples/cookbook.wasm-helloworld-print/manifest.json

@@ -0,0 +1,13 @@
+{
+  "name": "WASM Load Example - Helloworld",
+  "version": "1.0",
+  "manifest_version": 3,
+  "description": "Inspect background service worker console for output",
+  "background": {
+    "service_worker": "background.js",
+    "type": "module"
+  },
+  "content_security_policy": {
+    "extension_pages": "default-src 'self' 'wasm-unsafe-eval'"
+  }
+}

functional-samples/cookbook.wasm-helloworld-print/wasm/.gitignore

@@ -0,0 +1 @@
+target