WXT 中文文档

Appearance

Hooks ​

WXT 包含一套系统，允许你挂钩到构建过程中并进行修改。

添加 Hooks ​

添加 Hook 最简单的方式是通过 wxt.config.ts。以下示例展示了一个在 manifest.json 文件写入输出目录之前对其进行修改的 Hook：

ts
export default defineConfig({
  hooks: {
    'build:manifestGenerated': (wxt, manifest) => {
      if (wxt.config.mode === 'development') {
        manifest.name += ' (DEV)';
      }
    },
  },
});

大多数 Hooks 会将 wxt 对象作为第一个参数提供。它包含已解析的配置以及当前构建的其他信息。其余参数可以通过引用进行修改，从而改变构建系统的不同部分。

你可以在 API 参考中找到所有可用 Hooks 的列表。

将这样的一次性 Hooks 放在配置文件中很简单，但如果你发现自己需要编写大量 Hooks，应该将它们提取到 WXT Modules 中。

执行顺序 ​

由于 Hooks 可以在多个位置定义，包括 WXT Modules，它们的执行顺序可能很重要。Hooks 按以下顺序执行：

  1. NPM 模块，按 modules 配置中列出的顺序
  2. 用户模块，位于 /modules 文件夹中，按字母顺序加载
  3. 在 wxt.config.ts 中列出的 Hooks

要查看你的项目中的执行顺序，运行 wxt prepare --debug 并搜索 "Hook execution order"：

plaintext
⚙ Hook execution order:
⚙   1. wxt:built-in:unimport
⚙   2. src/modules/auto-icons.ts
⚙   3. src/modules/example.ts
⚙   4. src/modules/i18n.ts
⚙   5. wxt.config.ts > hooks

更改执行顺序很简单：

  • 为你的用户模块添加数字前缀（数字越小越先加载）：

    html
    📁 modules/
   📄 0.my-module.ts
   📄 1.another-module.ts

  • 如果你需要在用户模块之后运行某个 NPM 模块，只需将其设为用户模块并在文件名前添加数字前缀即可！

    ts
    // modules/2.i18n.ts
export { default } from '@wxt-dev/i18n/module';