如果wasm是通过npm发布的,需要做下面三件事
- 手动把.wasm文件拷贝到项目的public目录
- 在webpack.config.js里面需要设置 publicPath
- 需要用 ·chrome.runtime.getURL()· 来获取 .wasm 的路径
import init, { greet2 } from '@wk3368/hello-wasm';
const wasmPath = chrome.runtime.getURL("hello_wasm_bg.wasm");
// console.log("myPath: " + wasmPath);
init(wasmPath).then(() => {
const temp = greet2('WebAssembly3');
console.log('popup', temp);
});
如果想要在popup和background里面使用wasm,需要做在manifest里面添加权限
"content_security_policy": {
"extension_pages": "script-src 'self' 'wasm-unsafe-eval'; object-src 'self';"
},
如果想要在background里面使用wasm,
因为webpack build出来的文件会包含下面的
__webpack_require__.b = document.baseURI || self.location.href;
但是document在service worker里面不存在,所以会报错: document is undefined
解决办法:在package.json的scripts里面,添加一个sed命令
"scripts": {
"replace_background": "sed -i '' 's/document.baseURI[ ]*||//' ./build/background.js",
"watch": "webpack --mode=development --watch --config config/webpack.config.js",
"build": "webpack --mode=production --config config/webpack.config.js",
...
}
这样就可以用 yarn replace_background 来替换了。
注意: 因为yarn watch和yarn build生成的background.js 不一样,后者有压缩,所以 document.baseURI 和 || 之间没有空格,sed正则需要兼顾两种情况。