WXT

Appearance

설치 ​

새 프로젝트를 시작하거나 처음부터 시작하거나, 기존 프로젝트를 마이그레이션할 수 있습니다.

프로젝트 시작하기 ​

init 커맨드를 실행하고 안내에 따라 진행하세요.

sh
pnpm dlx wxt@latest init
sh
bunx wxt@latest init
sh
npx wxt@latest init
sh
# 처음에는 NPM을 사용하되, 프롬프트가 나타나면 Yarn을 선택하세요
npx wxt@latest init

스타터 템플릿:

TypeScript LogoVanilla
Vue LogoVue
React LogoReact
Svelte LogoSvelte
Solid LogoSolid

모든 템플릿은 기본적으로 TypeScript를 사용합니다. JavaScript를 사용하려면 파일 확장자를 변경하세요.

데모 ​

wxt init 데모

dev 커맨드를 실행한 후에는 다음 단계로 넘어가세요!

처음부터 시작하기 ​

  1. 새 프로젝트 생성
    sh
    cd my-project
pnpm init
    sh
    cd my-project
bun init
    sh
    cd my-project
npm init
    sh
    cd my-project
yarn init
  2. WXT 설치:
    sh
    pnpm i -D wxt
    sh
    bun i -D wxt
    sh
    npm i -D wxt
    sh
    yarn add --dev wxt
  3. 엔트리포인트 추가, my-project/entrypoints/background.ts:
    ts
    export default defineBackground(() => {
  console.log('Hello world!');
});
  4. package.json에 스크립트 추가:
    json
    {
  "scripts": {
    "dev": "wxt", 
    "dev:firefox": "wxt -b firefox", 
    "build": "wxt build", 
    "build:firefox": "wxt build -b firefox", 
    "zip": "wxt zip", 
    "zip:firefox": "wxt zip -b firefox", 
    "postinstall": "wxt prepare"
  }
}
  5. 개발 모드에서 확장 프로그램 실행
    sh
    pnpm dev
    sh
    bun run dev
    sh
    npm run dev
    sh
    yarn dev
    WXT가 자동으로 브라우저 창을 열고 확장 프로그램을 설치합니다.

다음 단계 ​