WXT

Appearance

브라우저 시작 ​

전체 설정 목록은 API 레퍼런스를 참고하세요.

개발 중 WXT는 Mozilla의 web-ext를 사용하여 여러분의 확장 프로그램이 설치된 상태로 브라우저 창을 자동으로 엽니다.

설정 파일 ​

브라우저 시작 설정은 세 곳에서 할 수 있습니다:

  1. <rootDir>/web-ext.config.ts: 버전 관리에서 제외되며, 이 파일을 통해 특정 프로젝트에 대한 개인 설정을 다른 개발자에게 영향을 주지 않고 구성할 수 있습니다.

    ts
    import { defineRunnerConfig } from 'wxt';

export default defineRunnerConfig({
  // ...
});

  2. <rootDir>/wxt.config.ts: runner 설정을 통해 버전 관리에 포함됩니다.

  3. $HOME/web-ext.config.ts: 컴퓨터의 모든 WXT 프로젝트에 대한 기본값을 제공합니다.

Recipes ​

브라우저 바이너리 설정 ​

개발 중에 열리는 브라우저를 설정하거나 커스텀하려면 다음과 같이 하세요:

ts
export default defineRunnerConfig({
  binaries: {
    chrome: '/path/to/chrome-beta', // 일반 Chrome 대신 Chrome Beta 사용
    firefox: 'firefoxdeveloperedition', // 일반 Firefox 대신 Firefox Developer Edition 사용
    edge: '/path/to/edge', // "wxt -b edge" 실행 시 MS Edge 열기
  },
});

기본적으로 WXT는 Chrome/Firefox가 설치된 위치를 자동으로 찾으려고 시도합니다. 하지만 Chrome이 비표준 위치에 설치된 경우, 위와 같이 수동으로 설정해야 합니다.

데이터 유지하기 ​

기본적으로 web-ext는 여러분의 브라우저 프로필을 수정하지 않도록 매번 dev 스크립트를 실행할 때마다 새로운 프로필을 생성합니다.

현재 크로미움 기반 브라우저만이 이 동작을 재정의하고 dev 스크립트를 여러 번 실행할 때 데이터를 유지할 수 있습니다.

데이터를 유지하려면 --user-data-dir 플래그를 설정하세요:

ts
export default defineRunnerConfig({
  chromiumArgs: ['--user-data-dir=./.wxt/chrome-data'],
});
ts
import { resolve } from 'node:path';

export default defineRunnerConfig({
  // 윈도우에서는 경로가 절대 경로여야 함
  chromiumProfile: resolve('.wxt/chrome-data'),
  keepProfileChanges: true,
});

이제 다음에 dev 스크립트를 실행하면 .wxt/chrome-data/{profile-name}에 지속적인 프로필이 생성됩니다. 지속적인 프로필을 사용하면 개발을 돕기 위해 개발자 도구 확장 프로그램을 설치하거나, 브라우저가 로그인 정보를 기억하도록 할 수 있으며, 다음에 dev 스크립트를 실행할 때 프로필이 재설정될 걱정 없이 작업할 수 있습니다.

TIP

--user-data-dir에는 원하는 디렉토리를 사용할 수 있습니다. 위 예제는 각 WXT 프로젝트마다 지속적인 프로필을 생성합니다. 모든 WXT 프로젝트에 대해 프로필을 생성하려면 chrome-data 디렉토리를 사용자 홈 디렉토리 안에 넣으면 됩니다.

브라우저 자동 열기 비활성화 ​

브라우저에 확장 프로그램을 수동으로 로드하고 싶다면, 자동 열기 기능을 비활성화할 수 있습니다:

ts
export default defineRunnerConfig({
  disabled: true,
});