Environment Variables

Dotenv 파일

WXT는 Vite와 동일한 방식으로 dotenv 파일을 지원합니다. 다음 파일 중 하나를 생성할 수 있습니다:

.env
.env.local
.env.[mode]
.env.[mode].local
.env.[browser]
.env.[browser].local
.env.[mode].[browser]
.env.[mode].[browser].local

이 파일들 안에 나열된 모든 환경 변수는 런타임에 사용할 수 있습니다:

# .env
WXT_API_KEY=...

await fetch(`/some-api?apiKey=${import.meta.env.WXT_API_KEY}`);

Vite의 규칙에 따라, 환경 변수 앞에 WXT_ 또는 VITE_를 붙여야 합니다. 그렇지 않으면 런타임에 사용할 수 없습니다.

내장 환경 변수

WXT는 현재 커맨드에 따라 몇 가지 커스텀 환경 변수를 제공합니다:

사용법	타입	설명
`import.meta.env.MANIFEST_VERSION`	`2 │ 3`	타겟 매니페스트 버전
`import.meta.env.BROWSER`	`string`	타겟 브라우저
`import.meta.env.CHROME`	`boolean`	`import.meta.env.BROWSER === "chrome"`와 동일
`import.meta.env.FIREFOX`	`boolean`	`import.meta.env.BROWSER === "firefox"`와 동일
`import.meta.env.SAFARI`	`boolean`	`import.meta.env.BROWSER === "safari"`와 동일
`import.meta.env.EDGE`	`boolean`	`import.meta.env.BROWSER === "edge"`와 동일
`import.meta.env.OPERA`	`boolean`	`import.meta.env.BROWSER === "opera"`와 동일

Vite의 환경 변수도 모두 사용할 수 있습니다:

사용법	타입	설명
`import.meta.env.MODE`	`string`	확장 프로그램이 실행 중인 모드
`import.meta.env.PROD`	`boolean`	`NODE_ENV='production'`일 때
`import.meta.env.DEV`	`boolean`	`import.meta.env.PROD`의 반대

기타 Vite 환경 변수

Vite는 두 가지 추가 환경 변수를 제공하지만, WXT 프로젝트에서는 유용하지 않습니다:

import.meta.env.BASE_URL: 대신 browser.runtime.getURL을 사용하세요.
import.meta.env.SSR: 항상 false입니다.

Manifest

환경 변수를 매니페스트에서 사용하려면 함수 구문을 사용해야 합니다:

export default defineConfig({
  extensionApi: 'chrome',
  modules: ['@wxt-dev/module-vue'],
  manifest: { 
    oauth2: { 
      client_id: import.meta.env.WXT_APP_CLIENT_ID
    } 
  } 
  manifest: () => ({ 
    oauth2: { 
      client_id: import.meta.env.WXT_APP_CLIENT_ID
    } 
  }), 
});

WXT는 설정 파일이 로드된 후에야 .env 파일을 불러올 수 있습니다. 따라서 manifest에 함수 구문을 사용하면 .env 파일이 프로세스에 로드된 후에 객체를 생성하도록 지연시킬 수 있습니다.

Environment Variables ​

Dotenv 파일 ​

내장 환경 변수 ​

Manifest ​

Environment Variables

Dotenv 파일

내장 환경 변수

Manifest