在瀏覽器擴充功能中使用 Node API

​

什麼情況下適合加入 Node polyfill

• 必要的相依套件在瀏覽器執行期中需要 Node 核心模組。
• 你正在從以 Node 為主的套件逐步遷移程式碼。
• 你可以為了特定執行期能力，接受較大的 bundle 體積。

​

範本範例

​

new-typescript

npx extension@latest create my-extension --template=new-typescript

​

content-typescript

npx extension@latest create my-extension --template=content-typescript

​

new-crypto

npx extension@latest create my-extension --template=new-crypto

​

預設行為

• 建置目標以瀏覽器為主（web）。
• 模組解析優先採用瀏覽器匯出（browser、module、main）。
• Extension.js 預設停用 Node 核心 fallback（例如 crypto、path、fs）。

​

設定 Node polyfill

import NodePolyfillPlugin from "node-polyfill-webpack-plugin";
import { createRequire } from "node:module";

const require = createRequire(import.meta.url);

export default {
  config: (config) => {
    config.resolve = config.resolve || {};
    config.resolve.fallback = {
      ...(config.resolve.fallback || {}),
      crypto: require.resolve("crypto-browserify"),
      path: require.resolve("path-browserify"),
      fs: false,
    };
    config.plugins = config.plugins || [];
    config.plugins.push(new NodePolyfillPlugin());
    return config;
  },
};

​

安裝選用的 polyfill 套件

​

擴充功能 API 與 Node API 的差別

​

注意事項

• 不要假設擴充功能執行期可以存取檔案系統；除非你有明確的瀏覽器安全策略，否則請保持 fs: false。
• 盡量採用 Web Crypto（crypto.subtle），而非引入體積較大的 Node crypto shim。
• Polyfill（Node API 的瀏覽器相容替代品）會增加 bundle 體積，可能影響擴充功能頁面與 content script 的啟動時間。
• 部分使用 node: specifier 的套件可能需要明確的 fallback 處理。

​

下一步

• 了解如何自訂 Rspack 設定。
• 了解如何管理 Extension 設定。

​

影片導覽