예시

이 페이지는 addfox 저장소의 확장 예시를 나열하며, 각 예시는 독립적인 디렉토리로 package.json과 addfox.config.ts를 포함합니다. 저장소 루트에서 pnpm / npm / yarn / bun으로 의존성을 설치한 후, 해당 예시 디렉토리에서 dev 또는 build를 실행하여 실행하거나 빌드할 수 있습니다.

예시	설명	저장소 링크
addfox-with-vue	Vue 3 템플릿: popup, options, content, background, 간단한 메시지 통신 포함	examples/addfox-with-vue
addfox-with-react	React 템플릿: popup, options, content, background, 간단한 메시지 통신 포함	examples/addfox-with-react
addfox-with-preact	Preact 템플릿: popup, options, content, background, 간단한 메시지 통신 포함	examples/addfox-with-preact
addfox-with-svelte	Svelte 템플릿: popup, options, content, background, 간단한 메시지 통신 포함	examples/addfox-with-svelte
addfox-with-solid	Solid 템플릿: popup, options, content, background, 간단한 메시지 통신 포함	examples/addfox-with-solid
addfox-with-react-shadcn	React + shadcn/ui: popup, options, content, background, sidepanel 다섯 Entry, Tailwind + 컴포넌트 라이브러리	examples/addfox-with-react-shadcn
addfox-with-devtools	순수 TypeScript: background + devtools_page만, React/Vue 없음, DevTools 확장 시연	examples/addfox-with-devtools
addfox-with-content-ui	Content UI 예시: 페이지에 확장 UI 마운트 시연	examples/addfox-with-content-ui
addfox-with-content-ui-react	React 버전 Content UI 예시	examples/addfox-with-content-ui-react
addfox-with-tailwindcss	Tailwind CSS 통합 예시	examples/addfox-with-tailwindcss
addfox-with-uno	UnoCSS 통합 예시	examples/addfox-with-uno
addfox-with-vue-tsx	Vue + TSX 예시	examples/addfox-with-vue-tsx
addfox-with-firefox	Firefox 대상 빌드 및 실행 예시	examples/addfox-with-firefox
addfox-with-mv2	Manifest V2 호환 예시 (마이그레이션/비교용)	examples/addfox-with-mv2
addfox-with-manifest-entries	manifest 필드를 통해 Entry를 선언하는 예시	examples/addfox-with-manifest-entries
addfox-with-react-entry-false	`entry: false` 시나리오 (rsbuild가 Entry를 직접 관리)의 React 예시	examples/addfox-with-react-entry-false
addfox-with-single-file	단일 파일/최소 구조 예시	examples/addfox-with-single-file
addfox-with-sandbox	샌드박스 페이지(sandbox) 예시	examples/addfox-with-sandbox
addfox-with-newtab-override	브라우저 새 탭 페이지 덮어쓰기 예시	examples/addfox-with-newtab-override
addfox-with-history-override	기록 페이지 덮어쓰기 예시	examples/addfox-with-history-override
addfox-with-bookmarks-override	북마크 페이지 덮어쓰기 예시	examples/addfox-with-bookmarks-override
addfox-with-rstest	Rstest 단위 테스트 통합 예시	examples/addfox-with-rstest
addfox-with-rstest-e2e	Rstest + E2E 테스트 예시	examples/addfox-with-rstest-e2e
addfox-with-env-vars	환경 변수 주입 및 범위 예시 (`ADDFOX_PUBLIC_` 및 프라이빗 변수 포함)	examples/addfox-with-env-vars

실행 방식

addfox 저장소 루트에서 설치를 실행한 후, 임의의 예시 디렉토리로 이동:

pnpm

npm

yarn

bun

pnpm install
cd examples/addfox-with-vue   # 또는 다른 예시
pnpm dev                   # 개발 모드
pnpm build                 # 빌드

빌드 결과물은 .addfox/extension(또는 해당 예시의 outputRoot/outDir 구성)에 있으며, 브라우저에서 해당 디렉토리를 로드하면 됩니다. dev를 사용할 때 프레임워크가 브라우저를 자동으로 열고 확장을 로드할 수 있습니다.

#예시

#실행 방식

예시

실행 방식