Hooks

WXT는 빌드 프로세스에 연결하여 변경을 할 수 있는 시스템을 포함하고 있습니다.

훅 추가하기

훅을 추가하는 가장 쉬운 방법은 wxt.config.ts 파일을 사용하는 것입니다. 다음은 출력 디렉토리에 manifest.json 파일이 쓰이기 전에 이를 수정하는 예제 훅입니다:

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

대부분의 훅은 첫 번째 인자로 wxt 객체를 제공합니다. 이 객체는 현재 빌드에 대한 해결된 설정(config)과 기타 정보를 포함합니다. 다른 인자들은 참조로 전달되며, 빌드 시스템의 다양한 부분을 변경할 수 있습니다.

이렇게 일회성 훅을 설정 파일에 추가하는 것은 간단하지만, 여러 훅을 작성해야 한다면 WXT 모듈로 추출하는 것이 좋습니다.

실행 순서

훅은 WXT 모듈을 포함한 여러 곳에서 정의될 수 있기 때문에, 실행 순서가 중요할 수 있습니다. 훅은 다음과 같은 순서로 실행됩니다:

1. modules 설정에 나열된 순서대로 NPM 모듈
2. /modules 폴더에 있는 사용자 모듈, 알파벳 순으로 로드
3. wxt.config.ts에 나열된 훅

프로젝트의 실행 순서를 확인하려면 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';