如何在Firefox Web扩展的内容脚本中使用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"但随后得到了：

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

我还尝试了背景脚本，但是该脚本是在扩展上下文中加载的，因此不允许我更改页面内容。

Answer 1

我不确定import("../crate/pkg")对您来说如何工作，因为Firefox 中的内容脚本不支持动态模块导入，并且“../crate/pkg”看起来不像可以工作的路径。也许你正在做一些预处理？

如果你的manifest.json中有"web_accessible_resources": ["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，则可以通过 sendMessage 在内容脚本和后台脚本之间进行通信以完成工作。