Skip to content

런타임 설정

이 API는 아직 개발 중이며, 더 많은 기능이 곧 추가될 예정입니다!

<srcDir>/app.config.ts 파일에서 런타임 설정을 정의할 수 있습니다:

ts
import { defineAppConfig } from 'wxt/sandbox';

// 설정에 대한 타입 정의
declare module 'wxt/sandbox' {
  export interface WxtAppConfig {
    theme?: 'light' | 'dark';
  }
}

export default defineAppConfig({
  theme: 'dark',
});

WARNING

이 파일은 저장소에 커밋되므로, 여기에 비밀 정보를 넣지 마세요. 대신 환경 변수를 사용하세요.

런타임 설정에 접근하려면 WXT가 제공하는 useAppConfig 함수를 사용합니다:

ts
import { useAppConfig } from 'wxt/sandbox';

console.log(useAppConfig()); // { theme: "dark" }

앱 설정에서 환경 변수 사용하기

app.config.ts 파일에서 환경 변수를 사용할 수 있습니다.

ts
declare module 'wxt/sandbox' {
  export interface WxtAppConfig {
    apiKey?: string;
    skipWelcome: boolean;
  }
}

export default defineAppConfig({
  apiKey: import.meta.env.WXT_API_KEY,
  skipWelcome: import.meta.env.WXT_SKIP_WELCOME === 'true',
});

이 방식에는 여러 장점이 있습니다:

  • 모든 환경 변수를 한 파일에서 정의할 수 있음
  • 문자열을 불리언이나 배열 같은 다른 타입으로 변환 가능
  • 환경 변수가 제공되지 않을 때 기본값을 설정할 수 있음