什麼情況下適合使用 WebAssembly
- 你的擴充功能會執行運算吃重的工作（剖析、媒體、光學字元辨識（OCR）、各種轉換）。
- 你需要對經常執行的程式碼路徑取得接近原生的效能。
- 你想沿用 web 專案中既有的 Wasm 模組。
WebAssembly 能做到的事
範本範例
transformers-js
Extension.js 啟用了什麼
Wasm plugin 會設定：experiments.asyncWebAssembly = true- 模組解析中加入
.wasm副檔名 - 為常見 Wasm 函式庫設定路徑別名（例如處理媒體的 ffmpeg、影像處理的 imagemagick，以及做 OCR 的 tesseract），讓執行期能正確解析 import。
將 .wasm 檔案當作資源打包
直接 import 一個 .wasm 檔案會把它實例化為非同步 WebAssembly 模組，這正是 wasm-bindgen 與 wasm-pack 產物所預期的。有些函式庫則附帶 Emscripten 載入器，其 init() 需要檔案的 URL 或位元組。對於這類函式庫，加上 ?url：建置會把二進位檔複製到 assets/ 並把它的 URL 交給你的程式碼，不需要更動 extension.config.js。
?url 約定完全一致。
只有在載入器接受任意協定時才把 URL 直接交給它。有些執行環境只接受 http: 與 https:，遇到 chrome-extension: URL 就會拋出錯誤，@imagemagick/magick-wasm 就是其中之一：它的 initializeImageMagick 會以 “Only http/https protocol is supported” 失敗。對於這類函式庫，依照上面的方式自行 fetch 建置產物並把位元組交給它：initializeImageMagick(new Uint8Array(bytes))。
使用方式
在一般的開發／建置流程中使用擴充功能裡的 Wasm 模組：典型用途
- 運算吃重的剖析／轉換。
- 媒體處理 pipeline。
- OCR／影像處理流程。
- 對效能敏感、會在 web 與 runtime 情境共用的演算法。
最佳實務
- 讓 Wasm 模組專注在效能熱點，把協調邏輯留在 JavaScript/TypeScript。
- 驗證輸出體積與載入時機在各擴充功能情境（background、content script、頁面）的表現。
- 在你會發佈的所有瀏覽器目標（
chrome、edge、firefox）上測試 Wasm 吃重的流程。
下一步
- 進一步了解 WebAssembly。
- 了解 Extension.js 如何處理 ECMAScript Modules。