WXT

Appearance

Frontend Frameworks ​

내장 모듈 ​

WXT는 가장 인기 있는 프론트엔드 프레임워크를 위한 사전 구성된 모듈을 제공합니다:

사용 중인 프레임워크에 맞는 모듈을 설치한 후, 설정 파일에 추가하세요:

ts
import { defineConfig } from 'wxt';

export default defineConfig({
  modules: ['@wxt-dev/module-react'],
});
ts
import { defineConfig } from 'wxt';

export default defineConfig({
  modules: ['@wxt-dev/module-vue'],
});
ts
import { defineConfig } from 'wxt';

export default defineConfig({
  modules: ['@wxt-dev/module-svelte'],
});
ts
import { defineConfig } from 'wxt';

export default defineConfig({
  modules: ['@wxt-dev/module-solid'],
});

Vite 플러그인 추가하기 ​

여러분이 사용하는 프레임워크에 공식 WXT 모듈이 없더라도 걱정하지 마세요! WXT는 Vite 플러그인이 있는 모든 프레임워크를 지원합니다.

설정 파일에 Vite 플러그인을 추가하기만 하면 됩니다. HTML 페이지나 콘텐츠 스크립트에서 프레임워크를 사용하면 바로 작동합니다 👍

ts
import { defineConfig } from 'wxt';
import react from '@vitejs/plugin-react';

export default defineConfig({
  vite: () => ({
    plugins: [react()],
  }),
});

WXT 모듈은 단순히 설정을 간소화하고 자동 임포트를 추가할 뿐입니다. 위의 예제와 크게 다르지 않습니다.

다중 앱 ​

웹 확장 프로그램은 보통 팝업, 옵션, 변경 로그, 사이드 패널, 콘텐츠 스크립트 등 여러 진입점(entrypoint)에 걸쳐 다양한 UI를 포함합니다. 따라서 각 진입점마다 개별 앱 인스턴스를 생성해야 합니다.

일반적으로 각 진입점은 내부에 자체 파일을 가진 디렉토리로 구성됩니다. 다음은 권장하는 폴더 구조입니다:

html
📂 {srcDir}/
   📂 assets/          <---------- 공유 리소스는 여기에 저장
      📄 tailwind.css
   📂 components/
      📄 Button.tsx
   📂 entrypoints/
      📂 options/       <--------- index.html 파일이 있는 폴더 사용
         📁 pages/      <--------- 라우터 페이지를 넣기 좋은 위치
         📄 index.html
         📄 App.tsx
         📄 main.tsx    <--------- 앱 생성 및 마운트 위치
         📄 style.css   <--------- 진입점별 스타일
         📄 router.ts

라우터 설정하기 ​

모든 프레임워크는 URL 경로를 사용해 멀티 페이지 앱을 구축하기 위한 라우터를 제공합니다. 하지만 웹 확장 프로그램은 이와 다르게 동작합니다. HTML 파일이 정적이기 때문에 chrome-extension://{id}/popup.html과 같은 형태로, 전체 경로를 변경하여 라우팅할 수 없습니다.

대신, 라우터를 "해시(hash)" 모드로 설정해야 합니다. 이 모드에서는 라우팅 정보가 URL의 해시 부분에 포함됩니다. 예를 들어 popup.html#/ 또는 popup.html#/account/settings와 같은 형태입니다.

해시 모드와 이를 활성화하는 방법에 대한 자세한 내용은 사용 중인 라우터의 문서를 참고하세요. 다음은 몇 가지 인기 있는 라우터 목록입니다: