Merge pull request #1 from linera-io/04-17-Messaging

Add a messaging pathway between the Web page and the Wasm backend
linera-io · Apr 19, 2024 · 2b9ec1d · 2b9ec1d
2 parents c5fed4d + 3d67204
commit 2b9ec1d
Show file tree

Hide file tree

Showing 9 changed files with 105 additions and 84 deletions.
diff --git a/build.sh b/build.sh
@@ -1,52 +1,8 @@
 #!/bin/sh
 
-command -v cargo >/dev/null 2>&1 || { echo >&2 "Installing cargo..."; curl --proto '=https' --tlsv1.2 -sSf https://sh.rustup.rs | sh; }
-command -v wasm-pack >/dev/null 2>&1 || { echo >&2 "Installing wasm-pack..."; cargo install wasm-pack; }
-
 rm -rf pkg
 
-# Find value of argument --manifest-version
-for arg in "$@"; do
-  case "$arg" in
-    --manifest-version=*)
-      manifest_version="${arg#*=}"
-      ;;
-  esac
-done
-
-# Find whether release was passed
-for arg in "$@"; do
-  case "$arg" in
-    --release)
-      release=true
-      ;;
-  esac
-done
-
 # Build for release or debug
-if [ "$release" = true ]; then
-  wasm-pack build --target=no-modules --release || exit 1
-else
-  wasm-pack build --target=no-modules --dev || exit 1
-fi
-
-# Copy manifest.json to pkg
-if [ "$manifest_version" = "v3" ] || [ "$manifest_version" = "3" ]; then
-  cp manifest_v3.json pkg/manifest.json
-else if [ "$manifest_version" = "v2" ] || [ "$manifest_version" = "2" ]; then
-  cp manifest_v2.json pkg/manifest.json
-else
-  echo "Packaging with manifest version v2. Pass --manifest-version=v3 to package with manifest version 3."
-  cp manifest_v2.json pkg/manifest.json
-  fi
-fi
-
-printf "
-const runtime = chrome.runtime || browser.runtime;
-
-async function run() {
-  await wasm_bindgen(runtime.getURL('linera_web_bg.wasm'));
-}
+wasm-pack build --target=web "$@"
 
-run();
-" >> pkg/run_wasm.js
+ln js/* manifest.json pkg/
diff --git a/js/content_script.js b/js/content_script.js
@@ -0,0 +1,10 @@
+function respond(id, message) {
+    window.dispatchEvent(new CustomEvent("linera-wallet-response", {
+        detail: { id, message },
+    }))
+}
+
+window.addEventListener("linera-wallet-request", async e =>
+    respond(e.detail.id, await chrome.runtime.sendMessage(e.detail.message)));
+
+window.dispatchEvent(new Event("linera-wallet-loaded"));
diff --git a/js/service_worker.js b/js/service_worker.js
@@ -0,0 +1,12 @@
+import init from './linera_web.js';
+import * as wasm from './linera_web.js';
+
+const runtime = chrome.runtime || browser.runtime;
+
+(async () => {
+    await init(runtime.getURL('linera_web_bg.wasm'));
+    runtime.onMessage.addListener((message, _sender, respond) => {
+        wasm[message.function].call(null, message.arguments).then(respond);
+        return true;
+    });
+})();
diff --git a/manifest.json b/manifest.json
@@ -0,0 +1,20 @@
+{
+    "name" : "linera-web",
+    "version" : "1.0",
+    "description" : "linera-web",
+    "permissions": [],
+    "content_scripts": [
+        {
+            "matches": ["file:///*"],
+            "js": ["content_script.js"]
+        }
+    ],
+    "background": {
+        "service_worker": "service_worker.js",
+        "type": "module"
+    },
+    "content_security_policy": {
+        "extension_pages": "script-src 'self' 'wasm-unsafe-eval';"
+    },
+    "manifest_version": 3
+}
diff --git a/manifest_v2.json b/manifest_v2.json
diff --git a/manifest_v3.json b/manifest_v3.json
diff --git a/sample-app/index.html b/sample-app/index.html
@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<html>
+    <head>
+        <script src="linera.js"></script>
+        <script>
+         async function foo() {
+             const response = await Linera.sendRequest({
+                 'function': 'query',
+                 'arguments': [3],
+             });
+             console.log('response: ', response);
+         }
+
+         foo();
+        </script>
+    </head>
+    <body>
+    </body>
+</html>
diff --git a/sample-app/linera.js b/sample-app/linera.js
@@ -0,0 +1,36 @@
+const Linera = (() => {
+    let loaded = new Promise(resolve => {
+        const listener = window.addEventListener("linera-wallet-loaded", () => {
+            resolve();
+            window.removeEventListener("linera-wallet-loaded", listener);
+        });
+    });
+
+    window.addEventListener("linera-wallet-response", e => {
+        responses.get(e.detail.id)?.(e.detail.message);
+        return false;
+    });
+
+    let nextMessageId = 0;
+    let responses = new Map();
+
+    return {
+        load: async () => await loaded,
+        sendRequest: async request => {
+            await loaded;
+
+            return new Promise(resolve => {
+                responses.set(nextMessageId, resolve);
+                window.dispatchEvent(new CustomEvent(
+                    "linera-wallet-request",
+                    {
+                        detail: {
+                            id: nextMessageId,
+                            message: request,
+                        },
+                    },
+                ));
+            });
+        },
+    };
+})();
diff --git a/src/lib.rs b/src/lib.rs
@@ -3,9 +3,14 @@ use web_sys::*;
 #[macro_use]
 mod util;
 
+#[wasm_bindgen]
+pub async fn query(n: u32) -> u32 {
+    n + 1
+}
+
 #[wasm_bindgen(start)]
 pub async fn main() {
     std::panic::set_hook(Box::new(console_error_panic_hook::hook));
 
     log!("Hello World!");
-}
+}