在 chrome 沙箱中使用 WebAssembly答案

【问题标题】：Using WebAssembly inside chrome sandbox在 chrome 沙箱中使用 WebAssembly
【发布时间】：2018-09-04 14:14:21
【问题描述】：

我有一个 chrome 扩展，其中包含一个复杂的函数 comp_func(data)，它通过执行许多按位运算来占用大量 CPU。因此，我正在尝试使用 WebAssembly。经过多次尝试，我得出一个结论，由于权限问题，我需要在沙箱中使用此功能。

现在我正在尝试关注 this WebAssembly tutorial 和 this Sandbox example 作为我的问题的“hello world”示例。

WebAssembly 文件包括：index.js 和 index.wasm，沙箱文件为：sandbox.html, page.js 是需要执行comp_func(data) 的扩展代码，并使用postMessage 作为与sandbox.html 通信的一种方式。 background.html 是扩展的背景文件。

这是我目前所拥有的：

manifest.json

   "sandbox": {
     "pages": ["sandbox.html"]
   },

background.js

<script src="page.js"></script>
<iframe id="theFrame" src="sandbox.html" style="display: none;"></iframe>

sandbox.html

<html>
      <body>
        <script src="index.js"></script>
        <script>
        var result = _roll_dice(); //the function of the WebAssembly
        console.log('results! ', result);
        </script>
      </body>
    </html>

所以，现在扩展程序正在调用 sandbox.html，而后者又在加载 index.js，但随后我收到错误消息：

加载失败 chrome-extension://index.wasm：否请求中存在“Access-Control-Allow-Origin”标头资源。因此，Origin 'null' 不允许访问。如果一个不透明响应满足您的需求，将请求的模式设置为“no-cors”以获取禁用 CORS 的资源。

据我了解，index.js 正在调用index.wasm，因为我在沙盒中，所以 CORS 权限存在问题。有人知道这种情况下的解决方案是什么吗？

【问题讨论】：

权限问题到底是什么？如果是脚本标签内联代码引起的，直接使用单独的js文件即可。也可以尝试使用不同方法的MDN tutorial。
@wOxxOm 感谢您的回复！我也尝试从 MDN 教程中做到这一点，但没有成功。如果我尝试在沙箱之外执行此操作，我会收到此错误：“未捕获（承诺）编译错误：WebAssembly.compile()：嵌入器不允许生成 Wasm 代码”
也许 Chrome 不支持扩展中的 wasm，但仅支持 https？您可以尝试通过在扩展程序中使用 Service Worker 来“服务”它。还可以考虑在crbug.com 或chromium-extensions-announce 上提问。
@wOxxOm 谢谢，我试试

标签： javascript google-chrome-extension cors sandbox webassembly

【解决方案1】：

WebAssembly 模块通常通过 HTTP 从 JavaScript 加载，但是，还有其他方法可以将它们包含在代码中。例如，您可以对您的 WebAssembly 二进制文件进行 base64 编码并将其包含为字符串。或者，您可以使用诸如 rollup 之类的构建工具来为您执行此操作：

https://github.com/rollup/rollup-plugin-wasm

这允许您将 wasm 文件作为导入引用：

import wasm from './sample.wasm';

sample({ ...imports }).then(({ instance }) => {
  console.log(instance.exports.main())
})

但是，当使用 rollup 构建时，它将被 base64 编码并内联。

【讨论】：