Transformers.js 在 Chrome 扩展开发中的 WASM 集成挑战与解决方案

在 Chrome 扩展开发中使用 Transformers.js 时，开发者可能会遇到一个棘手的问题：由于 Chrome Web Store 对 Manifest V3 扩展的严格安全策略限制，包含远程托管代码的扩展会被拒绝。本文将深入分析这一问题的技术背景，并提供切实可行的解决方案。

问题根源分析

Chrome Web Store 对 Manifest V3 扩展有一项关键要求：禁止包含远程托管代码。当开发者使用 Transformers.js 时，默认情况下它会从 CDN 加载 ONNX 运行时所需的 WASM 文件，这直接违反了 Chrome 的安全策略。

更具体地说，Transformers.js 依赖的 ONNX 运行时需要执行 WebAssembly 代码，而默认配置会触发以下两种违规行为：

1. 从远程服务器动态加载 WASM 文件
2. 在扩展内部使用 URL.createObjectURL 动态创建和执行代码

技术挑战详解

当开发者尝试绕过 CSP(内容安全策略)限制时，通常会遇到两个层面的问题：

1. WASM 文件加载问题：ONNX 运行时需要特定的 WASM 文件才能正常工作，这些文件通常包括：

   • ort-wasm.wasm
   • ort-wasm-threaded.wasm
   • 其他相关的 worker 脚本

2. 动态代码执行问题：即使将 WASM 文件本地化，ONNX 运行时内部仍会尝试使用 URL.createObjectURL 动态创建和执行 worker 脚本，这同样违反了 Chrome 的安全策略。

完整解决方案

经过实践验证，以下是解决这一问题的完整方案：

1. 本地化 WASM 资源：

   • 将所有必需的 WASM 文件下载并包含在扩展包中
   • 设置正确的路径指向这些本地文件

2. 配置 ONNX 运行时：

// 指定本地 WASM 文件路径
env.backends.onnx.wasm.wasmPaths = '/path/to/local/wasm/files/';

3. 调整构建流程：

   • 修改 webpack 配置，确保 WASM 文件被正确打包
   • 禁用不必要的动态代码生成功能

4. 内容安全策略调整： 在 manifest.json 中配置适当的内容安全策略：

"content_security_policy": {
  "extension_pages": "script-src 'self' 'wasm-unsafe-eval';"
}

实施建议

1. 资源管理：

   • 创建一个专门的目录(如 /ort/)存放所有 WASM 文件
   • 确保文件路径在构建后保持不变

2. 性能考量：

   • 注意扩展包大小，选择必要的 WASM 文件
   • 考虑使用 WASM 文件的压缩版本

3. 测试验证：

   • 在本地开发环境中充分测试
   • 使用 Chrome 的扩展开发者模式验证功能

总结

在 Chrome 扩展中集成 Transformers.js 虽然面临挑战，但通过将 WASM 资源本地化并正确配置 ONNX 运行时，开发者完全可以构建出符合 Chrome Web Store 要求的扩展。这一解决方案不仅满足了安全策略要求，还保持了 Transformers.js 的全部功能。

对于希望在其 Chrome 扩展中使用机器学习功能的开发者来说，这一技术路线提供了可靠的选择。随着 WebAssembly 技术的不断发展，未来这类集成可能会变得更加简单和高效。