在Chrome扩展使用WebAssembly

Question

我有一个Chrome扩展程序，包括复杂的功能comp_func(data)器，通过执行许多位运算需要大量的CPU。正因为如此，我试图用WebAssembly。

我试着遵循以下几个教程，例如this一个和this之一。

第一个链接显示的是：

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

但我得到一个错误：

未捕获（在承诺）类型错误：WebAssembly实例化：进口＃0模块=“ENV”错误：模块不是一个对象或功能

我已经尝试了很多使用这种方法，但没有奏效。我不明白如何使用从.wasm文件加载WebAssembly。

所以，我已经试过一个更简单的方法：第二个链接说把那个线在HTML文件中：

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

然后只需使用导出的函数：

var result = _roll_dice();

但我在扩展，所以我只有一个background.html文件。所以我在寻找一种方法来访问其背景文件中加载的模块。而事情变得复杂，因为函数comp_func(data)从Worker调用。

这是我到目前为止已经试过：

如果我打电话chrome.extension.getBackgroundPage()我可以访问模块，但我不能把它发送到工人：

无法执行“的postMessage”的“工人”：＃无法克隆。

如果我先尝试stringify它：

未捕获的类型错误：转换圆形结构，以JSON

（我试着取消它的圆形，没有工作......）

我不能从工人打电话chrome.extension.getBackgroundPage()因为我不能从那里访问铬API。

所以我的问题是：

1. 是否有人累了加载在Chrome扩展.wasm文件和它的工作？第二种方法（加载js文件）的声音比较简单，但如果你有这种方法工作的例子将是巨大的。

或2如何访问已在background.html被加载的模块（从第二个例子）？

或3如何通过我从JS文件到工（经由postMessage）所需的功能是什么？

总之，没有有人试图在Chrome扩展使用WebAssembly和存活讲？

编辑：我最终离开WebAssembly的方法。我还张贴了这个问题bugs-chromium，和几个月后有了答案。不知道这是否是真正的工作，但也许这与明显的答案，都将有助于人。

Answer 1

我一直在摆弄与WebAssembly近日，并且找到了一种方法，使其工作。下面是脚本文件：

main.js

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

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。

---

PS. If it seems like cheating or bad practice to you, this content_script.js also works:

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_accessible_resources部分的代码文件：

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