#브라우저 시작

Addfox는 개발 시 브라우저를 자동으로 시작하고 확장을 로드하여 개발 효율성을 높일 수 있습니다.

#빠른 시작

개발 명령 실행:

pnpm

npm

yarn

bun

pnpm dev

npm run dev

yarn dev

bun run dev

처음 개발 서버를 시작하면 자동으로 다음을 수행합니다:

1. 확장 빌드
2. 브라우저 열기
3. 개발 중인 확장 로드

#Scripts로 시작 (권장)

package.json에서 scripts를 구성하면 더 간결하게 다양한 브라우저를 시작할 수 있습니다:

{
  "scripts": {
    "dev": "addfox dev",
    "dev:chrome": "addfox dev -b chrome",
    "dev:edge": "addfox dev -b edge",
    "dev:brave": "addfox dev -b brave",
    "dev:firefox": "addfox dev -b firefox"
  }
}

구성 후 직접 사용:

pnpm

npm

yarn

bun

# Chrome (기본값)
pnpm dev

# 다른 브라우저
pnpm dev:edge
pnpm dev:firefox

# Chrome (기본값)
npm run dev

# 다른 브라우저
npm run dev:edge
npm run dev:firefox

# Chrome (기본값)
yarn dev

# 다른 브라우저
yarn dev:edge
yarn dev:firefox

# Chrome (기본값)
bun run dev

# 다른 브라우저
bun run dev:edge
bun run dev:firefox

#Chromium 기반 브라우저

Addfox는 다음 Chromium 기반 브라우저를 기본적으로 지원합니다:

#CLI를 통해 직접 시작

scripts를 사용하지 않는 경우 CLI를 통해 브라우저를 직접 지정할 수 있습니다:

pnpm

npm

yarn

bun

# Chrome (기본값)
pnpm addfox dev

# 다른 브라우저
pnpm addfox dev -b edge
pnpm addfox dev -b brave
pnpm addfox dev -b vivaldi

# Chrome (기본값)
npx addfox dev

# 다른 브라우저
npx addfox dev -b edge
npx addfox dev -b brave
npx addfox dev -b vivaldi

# Chrome (기본값)
yarn addfox dev

# 다른 브라우저
yarn addfox dev -b edge
yarn addfox dev -b brave
yarn addfox dev -b vivaldi

# Chrome (기본값)
bunx addfox dev

# 다른 브라우저
bunx addfox dev -b edge
bunx addfox dev -b brave
bunx addfox dev -b vivaldi

#Chromium 브라우저 경로 구성

브라우저가 기본 위치에 없는 경우 browserPath에서 구성할 수 있습니다:

// addfox.config.ts
export default defineConfig({
  browserPath: {
    chrome: "/path/to/chrome",
    edge: "/path/to/edge",
    brave: "/path/to/brave",
  },
});

#각 플랫폼 예시

macOS:

export default defineConfig({
  browserPath: {
    chrome: "/Applications/Google Chrome.app/Contents/MacOS/Google Chrome",
    edge: "/Applications/Microsoft Edge.app/Contents/MacOS/Microsoft Edge",
  },
});

Windows:

export default defineConfig({
  browserPath: {
    chrome: "C:\\Program Files\\Google\\Chrome\\Application\\chrome.exe",
    edge: "C:\\Program Files (x86)\\Microsoft\\Edge\\Application\\msedge.exe",
  },
});

Linux:

export default defineConfig({
  browserPath: {
    chrome: "/usr/bin/google-chrome",
    chromium: "/usr/bin/chromium-browser",
  },
});

#Chromium 캐시 사용자 데이터

기본적으로 각 시작은 새로운 사용자 데이터 디렉토리를 사용합니다. 유지해야 하는 경우(예: 로그인 상태 유지) package.json에 추가하세요:

{
  "scripts": {
    "dev:cache": "addfox dev -b chrome --cache",
    "dev:edge:cache": "addfox dev -b edge --cache"
  }
}

또는 CLI를 통해 직접 실행:

pnpm

npm

yarn

bun

pnpm addfox dev --cache
# 또는
pnpm addfox dev -c

npx addfox dev --cache
# 또는
npx addfox dev -c

yarn addfox dev --cache
# 또는
yarn addfox dev -c

bunx addfox dev --cache
# 또는
bunx addfox dev -c

또는 구성에서 활성화:

export default defineConfig({
  cache: true,
});

사용자 데이터는 .addfox/cache/ 디렉토리에 저장됩니다.

#Firefox

Firefox 개발 모드는 web-ext 도구를 사용하여 확장 수명 주기를 관리합니다.

#Firefox 시작

구성된 script 사용:

pnpm dev:firefox

또는 CLI를 통해 직접 실행:

pnpm

npm

yarn

bun

pnpm addfox dev -b firefox

npx addfox dev -b firefox

yarn addfox dev -b firefox

bunx addfox dev -b firefox

#Firefox 특성

• 확장 리로드는 web-ext에서 처리되며 Addfox의 WebSocket이 아닙니다
• Firefox가 자동으로 열리고 확장이 로드됩니다
• 파일 변경 시 자동 리로드 지원

#Firefox 경로 구성

export default defineConfig({
  browserPath: {
    firefox: "/Applications/Firefox.app/Contents/MacOS/firefox",
  },
});

#디버그 팁

#Service Worker 보기

1. chrome://extensions/ 열기
2. 개발 중인 확장 찾기
3. "Service Worker"를 클릭하여 백그라운드 스크립트 콘솔 보기

#Content Script 보기

1. 웹페이지에서 마우스 오른쪽 버튼 클릭 → 검사
2. Console 패널로 전환
3. 해당 확장의 컨텍스트 선택

#오류 모니터링 사용

package.json에 debug script를 추가합니다:

{
  "scripts": {
    "dev:debug": "addfox dev --debug",
    "dev:firefox:debug": "addfox dev -b firefox --debug"
  }
}

그런 다음 실행:

pnpm dev:debug

또는 CLI를 통해 직접 활성화:

pnpm

npm

yarn

bun

pnpm addfox dev --debug

npx addfox dev --debug

yarn addfox dev --debug

bunx addfox dev --debug

#관련 설정

• browserPath - 브라우저 실행 파일 경로 구성
• cache - 캐시 구성
• hotReload - 핫 리로드 구성
• debug - 오류 모니터링 구성