Javascript 在chrome扩展中使用WebAssembly

我有一个chrome扩展，包括一个复杂的函数

comp_func（data）

，它通过执行许多位操作占用大量CPU。因此，我尝试使用WebAssembly

我试着学习了一些教程，例如一和一

第一个链接说：

fetch('simple.wasm').then(response =>
  response.arrayBuffer()
).then(bytes =>
  WebAssembly.instantiate(bytes, importObject)
).then(results => {
  results.instance.exports.exported_func();
});

但我有一个错误：

未捕获（承诺中）类型错误：WebAssembly实例化：导入#0 module=“env”错误：模块不是对象或函数

我已经尝试了很多次使用这种方法，但都没有成功。我无法理解如何使用从

.wasm

文件加载的WebAssembly

所以我尝试了一种更简单的方法： 第二个链接表示将这一行放在html文件中：

<script src="index.js"></script>

但是，我在一个扩展中，所以我只有一个

background.html

文件。 因此，我正在寻找一种方法来访问加载在后台文件中的模块。 事情变得越来越复杂，因为函数

comp\u func（data）

是从a调用的。

这就是我迄今为止所尝试的：

如果我调用

chrome.extension.getBackgroundPage（）

我可以访问该模块 但我无法将其发送给工人：

未能对“Worker”执行“postMessage”：#无法克隆

如果我想先把它串起来：

未捕获类型错误：将循环结构转换为JSON

（我试图取消它的循环，但没有成功…）

我无法从Worker调用

chrome.extension.getBackgroundPage（）

，因为我无法从那里访问ChromeAPI

所以我的问题是：

是否有人尝试在chrome扩展名中加载

.wasm

文件并成功？ 第二种方法（加载

js

文件）听起来更简单，但如果您有一个这种方法的工作示例，那就太好了

或2。如何访问在

background.html

中加载的模块（来自第二个示例）

或3。如何将我需要的函数从js文件传递给Worker（通过

postMessage

）

总而言之，是否有人试图在chrome扩展中使用WebAssembly，并最终存活下来

编辑： 我最终放弃了WebAssembly的方法。 我也在，

---

几个月后，我得到了答案。不确定这是否真的有效，但也许这一点，连同标记的答案，将有助于某人。

我最近一直在摆弄WebAssembly，并找到了一种方法使其有效。以下是脚本文件：

main.js

chrome.browserAction.onClicked.addListener(function(tab) {
 chrome.tabs.executeScript(null, {file: "content_script.js"});
});

  var importObject = { imports: { imported_func: arg => console.log(arg) } };
  url = 'data:application/wasm;base64,' + "AGFzbQEAAAABCAJgAX8AYAAAAhkBB2ltcG9ydHMNaW1wb3J0ZWRfZnVuYwAAAwIBAQcRAQ1leHBvcnRlZF9mdW5jAAEKCAEGAEEqEAAL";
  WebAssembly.instantiateStreaming(fetch(url), importObject)
  .then(obj => obj.instance.exports.exported_func());

content\u script.js

chrome.browserAction.onClicked.addListener(function(tab) {
 chrome.tabs.executeScript(null, {file: "content_script.js"});
});

  var importObject = { imports: { imported_func: arg => console.log(arg) } };
  url = 'data:application/wasm;base64,' + "AGFzbQEAAAABCAJgAX8AYAAAAhkBB2ltcG9ydHMNaW1wb3J0ZWRfZnVuYwAAAwIBAQcRAQ1leHBvcnRlZF9mdW5jAAEKCAEGAEEqEAAL";
  WebAssembly.instantiateStreaming(fetch(url), importObject)
  .then(obj => obj.instance.exports.exported_func());

数据URL属于通用教程wasm示例（simple.wasm），该示例在控制台上写入42

---

注：如果你觉得这是作弊或不好的做法，那么这个content_script.js也可以：

var importObject = {
   imports: {
    imported_func: function(arg) {
    console.log(arg);
    }
   }
 };

var response = null;
var bytes = null;
var results = null;


var wasmPath = chrome.runtime.getURL("simple.wasm");
fetch(wasmPath).then(response =>
    response.arrayBuffer()
    ).then(bytes =>
       WebAssembly.instantiate(bytes, importObject)
        ).then(results => {
        results.instance.exports.exported_func();
  });

仅当您在manifest.json的web\u accessible\u resources部分包含代码文件时，尽管：

    ...
    "web_accessible_resources": [
     "content_script.js",
     "main.js",
     "simple.wasm"
    ],
    ...

---

Github:

我认为可能的扩展还不能运行wasm。至于消息传递部分：1）使用chrome API只能传输简单数据，即数字、字符串、布尔值、数组和由这些简单数据组成的对象，2）工作者也可以传输，3）函数不可传输。你知道我如何确定扩展是否不能运行wasm吗？你可以询问和/或。