构建Rust+Wasm Chrome扩展时wasm.js出现export语法错误

wasm-pack默认输出ES模块格式代码，但Chrome扩展的背景页、内容脚本等运行环境默认不支持ES模块的import/export语法，这就是你碰到两个错误的核心原因：

• 首次报错是因为普通脚本环境无法识别export关键字
• 注释export后出现import错误，是因为脚本里仍残留ES模块的导入语法，同样不被普通脚本环境兼容

1. 调整wasm-pack构建目标 #

执行构建命令时指定适配Chrome扩展的目标，直接生成兼容代码：

# 专门针对Chrome扩展优化的目标
wasm-pack build --target chrome
# 或者生成无模块依赖的全局变量形式代码
wasm-pack build --target no-modules

• --target chrome：会生成适配Chrome扩展上下文的代码，自动处理模块兼容问题
• --target no-modules：输出不依赖ES模块的代码，通过全局变量暴露Wasm接口，兼容性更广

2. 标记扩展脚本为ES模块（需Chrome 92+） #

如果想保留ES模块格式，需要在manifest.json里把对应的脚本声明为模块：
比如配置背景页：

{
  "background": {
    "service_worker": "wasm.js",
    "type": "module"
  }
}

或者内容脚本：

{
  "content_scripts": [
    {
      "matches": ["<all_urls>"],
      "js": ["wasm.js"],
      "type": "module"
    }
  ]
}

注意：这种方式要求所有关联脚本都遵循模块规范，且Chrome版本不低于92。

3. 手动修改生成的wasm.js（不推荐） #

如果临时不想重新构建，可以手动适配代码：

• 将export function xxx(...)改为window.xxx = function(...)，把接口挂载到全局
• 替换import相关代码为同步加载Wasm的逻辑，但这种方式容易引发加载路径、异步等问题，不适合长期使用

• Chrome扩展不同上下文（背景页、内容脚本、Popup）的模块支持细节有差异，优先推荐用--target chrome构建
• 构建后要保证wasm_bg.wasm和wasm.js在同一目录下，否则会出现Wasm加载失败的情况

内容的提问来源于stack exchange，提问作者Naxi