在chrome扩展中使用WebAssembly

Question

我有一个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();
});

但是我收到一个错误:

未捕获(承诺)TypeError:WebAssembly实例化:导入#0 module ="env"错误:模块不是对象或函数

我已经尝试了很多使用这种方法,但它没有用.我无法理解如何使用从.wasm文件加载的WebAssembly .

所以我尝试了一种更简单的方法:第二个链接说将该行放在html文件中:

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

然后只使用导出的函数:

var result = _roll_dice();

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

这是我到目前为止所尝试的:

如果我打电话,chrome.extension.getBackgroundPage()我可以访问模块,但我无法将其发送给工人:

无法在'Worker'上执行'postMessage':#无法克隆.

如果我先尝试一下stringify:

未捕获的TypeError:将循环结构转换为JSON

(我试图解开它,没有用......)

我无法chrome.extension.getBackgroundPage()从工作人员打电话,因为我无法从那里访问chrome API.

所以我的问题是:

1. 有人厌倦了加载.wasmchrome扩展文件并且它有效吗？第二种方法(加载js文件)听起来更简单,但如果你有一个这种方法的工作示例,它将是伟大的.

或2.如何访问已加载的模块background.html(从第二个示例)？

或者3.如何将我需要的函数从js文件传递给Worker(via 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 sample(simple.wasm),它在控制台上写入42.

PS.如果它对你来说似乎是作弊或不好的做法,那么这个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_accessible_resources部分中时,

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