#핫 업데이트 (HMR)

addfox dev 명령은 개발 시 핫 업데이트 경험을 제공합니다: 코드를 저장한 후 자동으로 재빌드하고 WebSocket을 통해 브라우저 확장에 리로드를 알립니다.

#작동 메커니즘

소스 코드 변경
    ↓
Rsbuild Watch 재빌드
    ↓
빌드 완료 → WebSocket 알림
    ↓
브라우저 확장 리로드
    ↓
페이지 자동 새로고침

#다양한 Entry의 핫 업데이트 메커니즘

#Background / Service Worker

Background 스크립트는 확장 리로드 메커니즘을 사용합니다:

1. 코드 변경 → Rsbuild 재빌드
2. 빌드 완료 → WebSocket이 리로드 명령 전송
3. chrome.runtime.reload() 호출하여 전체 확장 리로드
4. Service Worker가 재시작되며 새로운 코드를 로드

#Content Script

Content Script는 재주입 메커니즘을 사용합니다:

1. 코드 변경 → Rsbuild 재빌드
2. 빌드 완료 → 확장 리로드
3. Content Script가 일치하는 페이지에 자동으로 주입
4. 열린 탭은 구성에 따라 자동으로 새로고침할 수 있습니다 (구성 참조)

// addfox.config.ts
export default defineConfig({
  hotReload: {
    autoRefreshContentPage: true,  // content 변경 시 페이지 자동 새로고침, 기본값 true
  },
});

#Popup / Options / Sidepanel

페이지 유형 Entry는 Rsbuild HMR 메커니즘을 사용합니다:

1. 코드 변경 → Rsbuild가 HMR 핫 교체 시도
2. HMR 성공 → 페이지가 부분적으로 업데이트되고 상태가 유지됨
3. HMR 실패 → 자동으로 페이지 새로고침으로 폴백

#Firefox의 특수 처리

Firefox 개발 모드는 web-ext 도구를 사용하여 확장을 관리합니다:

• 확장 리로드는 Addfox의 WebSocket이 아닌 web-ext에서 처리됩니다
• 처음 시작할 때 Firefox가 자동으로 열리고 확장이 로드됩니다
• 자동 리로드(livereload) 지원

#사용 방식

# 개발 서버 시작 (HMR 자동 활성화)
addfox dev

# 대상 브라우저 지정
addfox dev -b chrome
addfox dev -b firefox

#첫 번째 시작 프로세스

addfox dev를 실행한 후:

1. 첫 번째 빌드 완료
2. 구성에 따라 브라우저 자동 시작
3. 개발 중인 확장 로드
4. 확장의 popup/options 페이지 자동 열기 (open이 구성된 경우)

#구성 옵션

#핫 리로드 포트

// addfox.config.ts
export default defineConfig({
  hotReload: {
    port: 23333,              // WebSocket 포트, 기본값 23333
    autoRefreshContentPage: true,  // content 변경 시 페이지 자동 새로고침, 기본값 true
  },
});

#다음 단계

• browserPath 구성 — 개발 시 브라우저 자동 열기 구성
• monitor 디버깅 — 오류 모니터링 패널을 사용하여 디버그
• config/hot-reload — 핫 리로드의 전체 구성 옵션