javascript - 如何在 Firefox Web 扩展的内容脚本中使用 Wasm?
问题描述
我正在使用 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.
我还尝试了一个后台脚本,但它是在扩展上下文中加载的,因此它不允许我更改页面内容。
解决方案
我不确定你import("../crate/pkg")
的工作原理是什么,因为Firefox 的内容脚本不支持动态模块导入,并且“../crate/pkg”看起来不像是一个可以工作的路径。也许你正在做一些预处理?
如果您的 manifest.json 中有,加载裸 WASM(我从这个示例中"web_accessible_resources": ["add.wasm"]
获取 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 在内容脚本和后台脚本之间进行通信以完成工作。
推荐阅读
- sql - 如何将 UNIX 纪元秒数转换为 Snowflake 中的时间戳?
- apache-nifi - NiFi:QueryElasticSearchHTTP结果到属性
- java - Spring CXF Soap 客户端 OAuth2 客户端凭据
- django-models - 如何在 Django ModelForm 中显示 CHOICES
- java - 设计模式(命令模式)避免多个 if 条件
- join - 如何有效地将两列范围转换为扩展表?
- java - for循环中的迭代是什么意思?
- react-native - 自定义 Header 组件中屏幕转换上的标题动画?
- database - 创建多个表 sqlplus
- python-3.x - 列表索引必须是整数或切片,而不是 dict - 在特定情况下?