使用wasm-pack构建时，在Rust和JavaScript之间传递字符串

Question

我正在构建一个Chrome扩展，我选择使用一些WebAssembly功能。我使用wasm-pack来构建源代码，因为它提供了一个--target web，它降低了插入Wasm函数的复杂性。在Rust和JS之间传递整数值是无缝的，但我似乎无法将字符串传递给Rust，反之亦然。

下面是我正在做的工作：

#[wasm_bindgen]
extern "C" {
    fn alert(s: &str);

    #[wasm_bindgen(js_namespace = console)]
    fn log(x: &str);
} 

#[wasm_bindgen]
pub extern "C" fn add_two(x: i32) -> i32 {
   x + 2
}

#[wasm_bindgen]
pub fn hello(name: &str) {
    log("Hello") // <-- passing a '&str' directly works. I can see it in the browser.
    log(name) // <-- does not seem to work. There is no output
    alert(&format!("Hello {}", name)); // <- Only output im getting is "Hello !"
}

更新:关于如何导入和实例化wasm的更多信息

在使用wasm构建并导入生成的pkg目录到我的JS文件夹之后。我通过manifest.json文件将pkg目录的内容作为web_resource提供给项目。

下面是如何在我的content_script.js中加载脚本

(async function() {
  // Get the JS File
  const src = await import("/pkg/rusty.js");
  // Fetch the wasm file.
  const wasm_src = chrome.extension.getURL("/pkg/rusty_bg.wasm");
  //src has an exported function 'default' that initializes the WebAssembly module.
  let wasm = await src.default(wasm_src);

  wasm.hello("stack-overflow");
})();

我还注意到，生成的wasm_bg文件底部有一些锈蚀错误输出。

​

Answer 1

问题在于如何加载代码：

(async function() {
  // Get the JS File
  const src = await import("/pkg/rusty.js");
  // Fetch the wasm file.
  const wasm_src = chrome.extension.getURL("/pkg/rusty_bg.wasm");
  //src has an exported function 'default' that initializes the WebAssembly module.
  let wasm = await src.default(wasm_src);

  wasm.hello("stack-overflow");
})();

从wasm返回的.default(...)是一个具有原始WebAssembly导出的对象，它只能对原始数字进行操作。

在这种情况下，wasm.hello需要两个整数-- WebAssembly内存中字符串的指针和长度--并且JavaScript愉快地将"stack-overflow"转换为0，并提供另一个0作为默认值，这就是为什么您在锈蚀端得到一个空字符串的原因。

相反，您需要的是处理适当转换的函数的包装版本。这些文件直接用于导入.js文件：

(async function() {
  // Get the JS File
  const rusty = await import("/pkg/rusty.js");
  // Fetch the wasm file.
  const wasm_src = chrome.extension.getURL("/pkg/rusty_bg.wasm");
  // rusty has an exported function 'default' that initializes the WebAssembly module.
  await rusty.default(wasm_src);

  rusty.hello("stack-overflow"); // it works!
})();