跳转到主要内容
无需自定义打包配置,即可在扩展中使用 WebAssembly。 Extension.js 在其 Rspack 管线中带有内置的 WebAssembly(Wasm)默认设置,因此常见的 Wasm 工作流无需额外配置即可工作。

什么场景适合用 WebAssembly

  • 你在扩展中运行计算密集型任务(解析、媒体、光学字符识别(OCR)、变换)。
  • 你需要让常用代码路径达到接近原生的性能。
  • 你要复用来自 web 项目的现有 Wasm 模块。

WebAssembly 的能力

能力它能带来什么
内置的 Wasm 管线默认设置无需手动接线打包器,即可运行常见 Wasm 流程
异步 Wasm 支持在扩展上下文中加载 .wasm 模块
运行时兼容性辅助处理 Wasm 生态中常见的资源模式
一致的命令工作流devbuild 命令搭配使用 Wasm

模板示例

sidebar-transformers-js template screenshot 使用 Transformers.js 的 AI/ML sidebar 扩展,底层通过 WebAssembly 做推理。
npx extension@latest create my-extension --template=sidebar-transformers-js
仓库:extension-js/examples/sidebar-transformers-js

Extension.js 为你启用了什么

Wasm 插件会配置:
  • experiments.asyncWebAssembly = true
  • 在模块解析的扩展名中加入 .wasm
  • 为常用 Wasm 库设置路径别名(例如用于媒体处理的 ffmpeg、用于图像处理的 imagemagick、用于 OCR 的 tesseract),让导入在运行时能正确解析。
这减少了从扩展脚本/页面里导入 Wasm 模块时的样板代码。

用法

把 Wasm 模块作为常规开发/构建流程的一部分使用:
npx extension dev ./my-extension
你也可以用一个公开可用的 Wasm 示例进行测试:
npx extension@latest dev https://github.com/GoogleChrome/chrome-extensions-samples/tree/main/functional-samples/cookbook.wasm-helloworld-print

典型使用场景

  • 计算密集型的解析/变换。
  • 媒体处理管线。
  • OCR / 图像处理工作流。
  • 在 web/运行时上下文之间共享的、对性能敏感的算法。

最佳实践

  • 让 Wasm 模块专注于热点路径,把编排逻辑保留在 JavaScript/TypeScript 里。
  • 对扩展上下文(background、content script、页面)验证产物体积和加载时机。
  • 在你所发布的目标浏览器上测试 Wasm 密集型流程(chromeedgefirefox)。

下一步