WXT浏览器插件开发中文教程(12)----WXT配置详解之Hooks

前言

大家好，我是倔强青铜三。是一名热情的软件工程师，我热衷于分享和传播IT技术，致力于通过我的知识和技能推动技术交流与创新，欢迎关注我，微信公众号：倔强青铜三。欢迎点赞、收藏、关注，一键三连！！！

Hooks ​

WXT 包含一个系统，允许你在构建过程中插入Hooks并进行更改。

添加Hooks ​

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

wxt.config.ts

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

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

将此类一次性Hooks放入配置文件中非常简单，但如果你发现自己编写了许多Hooks，则应将它们提取到 WXT Modules 中。

执行顺序 ​

由于Hooks可以在多个地方定义，包括 WXT Modules，因此它们的执行顺序可能很重要。Hooks的执行顺序如下：

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

要查看项目的执行顺序，请运行带有 wxt prepare --debug 标志的命令，并搜索“Hook execution order”：

⚙ 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

更改执行顺序很简单：

• 在用户模块的文件名前加上数字（数字越小越先加载）：

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

• 如果你需要在用户模块之后运行一个 NPM 模块，只需将其作为用户模块，并在文件名前加上数字！

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

最后感谢阅读！欢迎关注我，微信公众号：倔强青铜三。欢迎点赞、收藏、关注，一键三连！！！