#소개

Addfox는 Rsbuild 기반의 브라우저 확장 프로그램 개발 프레임워크로, 동일한 프로젝트에서 Chrome과 Firefox 확장 프로그램을 개발하고 빌드할 수 있도록 도와줍니다.

#왜 Addfox를 선택해야 할까요

브라우저 확장 프로그램 개발은 본래 간단해야 합니다. HTML, JavaScript, CSS와 같은 Web 기술만 있으면 됩니다. 하지만 현실에서는 HMR, 오류 디버깅, 프론트엔드 프레임워크 통합 등의 문제가 개발자들을 괴롭히고 있습니다.

Addfox의 목표는 확장 프로그램 개발을 다시 간단하게 만드는 것입니다:

AI 시대에 Addfox는 한 걸음 더 나아가 AI가 확장 프로그램 개발을 더 잘 이해하고 지원할 수 있도록 합니다:

• AI 친화적인 프로젝트 구조 — 자동으로 llms.txt, meta.md 등의 구조화된 문서를 생성하여 AI 어시스턴트가 프로젝트 아키텍처와 설정을 빠르게 이해할 수 있도록 합니다
• 터미널 오류 출력 — 개발 시 오류를 브라우저 DevTools를 열지 않고도 터미널에 직접 출력하여, 어떤 편집기에서든 Ask AI 기능을 편리하게 사용할 수 있습니다
• Skills 지원 — 마이그레이션(migrate-to-addfox), 디버깅(addfox-debugging) 등 재사용 가능한 AI 스킬 라이브러리를 내장하여 AI 어시스턴트가 더 전문적으로 개발과 디버깅을 지원할 수 있습니다
• 최소화된 코드 제약 — 특정 코드 조직 방식을 강제하지 않아 AI가 생성한 코드를 프로젝트에 원활하게 통합할 수 있습니다

개발자이든 AI 보조 개발을 사용하든, Addfox는 더 나은 경험을 제공합니다.

#기능 특성

#개발자를 위해

HMR, 다중 브라우저 지원 및 최소 설정으로 확장 프로그램을 더 빠르게 배포할 수 있습니다.

#AI를 위해

구조화된 meta, 터미널 오류 출력 및 Skills를 통해 AI가 확장 프로그램을 이해하고 확장할 수 있습니다.

#핵심 개념

Addfox는 확장 프로그램 개발의 일반적인 어려움을 캡슐화합니다:

• Entry 자동 발견 — 규칙에 따라 파일을 배치하면 되며, 수동으로 entry를 설정할 필요가 없습니다
• Manifest 스마트 처리 — 빌드된 경로를 자동으로 주입합니다
• 개발 시 자동 리로드 — WebSocket으로 빌드 완료를 감지하여 확장 프로그램을 자동으로 새로고침합니다

#다른 솔루션과 비교

브라우저 확장 프로그램 개발 생태계는 이러한 우수한 프레임워크들로 인해 더욱 풍성해졌습니다. WXT는 Vite의 강력한 성능과 세심하게 설계된 플러그인 시스템, 그리고 직관적인 규약 기반 개발 경험을 가져왔습니다. Plasmo는 완벽한 클라우드 서비스 통합과 바로 사용할 수 있는 뛰어난 개발 경험을 제공합니다. Extension.js는 간결하고 사용하기 쉬워 빠른 프로토타입 개발에 매우 적합합니다. 각 프레임워크는 확장 프로그램 개발 진입 장벽을 낮추는 데 중요한 기여를 했습니다.

Addfox는 이러한 우수한 사례들을 참고하면서도 자신만의 길을 걸어갑니다:

Addfox의 고유한 장점:

• Rsbuild 극속 속도 — Vite/Parcel 솔루션에 비해 콜드 스타트와 HMR이 더 빠릅니다
• AI 우선 설계 — 내장 llms.txt, 구조화된 오류 출력 및 Skills 지원으로 AI 보조 개발을 위해 특별히 설계되었습니다
• 최대한의 자유 — 파일 구조를 강제하지 않고, 커스텀 API가 없어 원하는 코드 조직 방식을 사용할 수 있습니다
• 진정한 프레임워크 무관 — 컴포넌트 래핑이나 특별한 어댑터가 필요 없어 어떤 UI 프레임워크와도 원활하게 협업할 수 있습니다

#빠른 시작

# 스캐폴드를 사용하여 프로젝트 생성
pnpm create addfox-app

# 프로젝트 디렉토리로 이동
cd my-extension

# 개발 서버 시작
pnpm dev

app/popup/index.tsx 파일을 편집하고 저장하면 확장 프로그램이 자동으로 리로드됩니다.

#다음 단계

• 설치 가이드 — 상세한 프로젝트 생성 단계
• 디렉토리 구조 — 프로젝트 조직 방식 이해하기
• 설정 참고 — 모든 설정 옵션 보기