Chome Extension v3 + WebAssembly + NPM 的一些坑

如果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正则需要兼顾两种情况。