WXT

Appearance

다양한 브라우저 타겟팅 ​

WXT로 확장 프로그램을 빌드할 때, 여러 브라우저와 매니페스트 버전을 타겟팅하여 여러 빌드를 생성할 수 있습니다.

브라우저 타겟팅 ​

-b CLI 플래그를 사용하면 특정 브라우저용 확장 프로그램을 별도로 빌드할 수 있습니다. 기본적으로 chrome이 타겟팅됩니다.

sh
wxt            # wxt -b chrome과 동일
wxt -b firefox
wxt -b custom

개발 중에 Firefox를 타겟팅하면 Firefox가 열립니다. 다른 문자열은 기본적으로 Chrome을 엽니다. 어떤 브라우저가 열릴지 커스텀하려면 브라우저 바이너리 설정을 참조하세요.

또한 WXT는 런타임에 사용 중인 브라우저를 감지할 수 있는 여러 상수를 정의합니다:

ts
if (import.meta.env.BROWSER === 'firefox') {
  console.log('Firefox 빌드에서만 실행되는 작업');
}
if (import.meta.env.FIREFOX) {
  // 위의 if문과 동일한 단축 표현
}

자세한 내용은 내장 환경 변수를 참조하세요.

매니페스트 버전 지정하기 ​

특정 매니페스트 버전을 지정하려면 --mv2 또는 --mv3 CLI 플래그를 사용하세요.

기본 매니페스트 버전

기본적으로 WXT는 Safari와 Firefox에서는 MV2를, 다른 모든 브라우저에서는 MV3를 대상으로 합니다.

브라우저와 마찬가지로, 내장 환경 변수를 사용해 런타임에 대상 매니페스트 버전을 확인할 수 있습니다:

ts
if (import.meta.env.MANIFEST_VERSION === 2) {
  console.log('MV2 빌드에서만 실행할 작업');
}

엔트리포인트 필터링 ​

특정 브라우저를 대상으로 할 때 include와 exclude 옵션을 사용해 각 엔트리포인트를 포함하거나 제외할 수 있습니다.

다음은 몇 가지 예제입니다:

  • firefox를 대상으로 할 때만 빌드되는 콘텐츠 스크립트:

    ts
    export default defineContentScript({
  include: ['firefox'],

  main(ctx) {
    // ...
  },
});

  • chrome을 제외한 모든 대상에 대해 빌드되는 HTML 파일:

    html
    <!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="manifest.exclude" content="['chrome', ...]" />
  </head>
  <body>
    <!-- ... -->
  </body>
</html>

또는 filterEntrypoints 설정을 사용해 빌드할 모든 엔트리포인트를 나열할 수도 있습니다.