如何在 Firefox 网络扩展的内容脚本中使用 Wasm？

Question

我正在使用 Rust 构建一个 Firefox 插件。我正在尝试插入 HTML 并在特定页面上做一些事情。显然，内容脚本是我想要使用的东西。我的内容脚本是：

import("../crate/pkg").then(({ Addon }) => {
    const addon = Addon.new();

    console.log(addon.where_am_i());
}).catch(e => console.error("Error importing:", e));

我得到的错误是：

TypeError: "0125c9960050e7483877.module.wasm is not a valid URL."

我尝试添加到 manifest.json:

"web_accessible_resources": [
  "0125c9960050e7483877.module.wasm"
]

我以 moz-extension://<extension-UUID>/0125c9960050e7483877.module.wasm" 访问它，但后来我得到：

Error importing: Error: "Loading chunk 0 failed.

我也尝试了一个后台脚本，但它是在扩展上下文中加载的，所以它不允许我更改页面内容。

Answer 1

我不确定 import("../crate/pkg") 对您有何作用，因为 dynamic module imports are not supported in content scripts in Firefox 和“../crate/pkg”看起来不像一条可行的路径。也许您正在做一些预处理？

如果你的 manifest.json 中有 "web_accessible_resources": ["add.wasm"]，加载裸 WASM（我从 this sample 中获取 add.wasm）工作正常：

WebAssembly.instantiateStreaming(fetch(browser.runtime.getURL("add.wasm")), {})
.then(results => {
  console.log("wasm returned", results.instance.exports.add_one(41));
}).catch((err) => {
  console.error("Unable to instantiateStreaming", err)
});

让生成的 JS 包装器在内容脚本中工作是一个不同的问题，这取决于您运行使用的工具和特定模式。

如果您能够运行在后台脚本中使用 WASM，您可以 communicate between the content script and the background script via sendMessage 完成工作。

如何在 Firefox 网络扩展的内容脚本中使用 Wasm？

How do I use Wasm in the content script of a Firefox web extension?

javascript

firefox-addon

rust

webassembly

firefox-addon-webextensions