AddFox
  • 한국어

      • 더 나은 브라우저 확장 프로그램 구축개발자와 AI를 위해

      브라우저 확장 프로그램 개발을 가속화하세요. Rsbuild 기반, 빠르고, 간단하고, 자유롭습니다.

      빠른 시작
      pnpm create addfox-app
      GitHub에서 보기
      bash
      $ addfox dev
      [Addfox] 0.0.1 with Rsbuild 0.4.x
      [Addfox] ● Parse config 25ms
      EntryFile
      backgroundapp/background.ts
      contentapp/content/index.ts
      popupapp/popup/index.tsx
      [Addfox] ● Rsbuild ready 136ms
      [Rsbuild] start building app\content\index.ts
      [Rsbuild] ready built in 0.08 s
      [Addfox] ● Dev server http://localhost:3000 2ms
      [Addfox] ● Extension size: 1.24 MB
      🔒chrome-extension://.../welcome.html

      Addfox + React

      Your extension is ready. Happy building!

      개발자를 위해

      핫 업데이트, 다중 브라우저 지원 및 최소한의 설정으로 확장 프로그램을 더 빠르게 배포하세요.

      극속 HMR

      독립적인 Reloader로 확장 프로그램 업데이트를 제어하여 content_script와 background 모두에서 빠른 HMR을 구현합니다.

      ReloaderExtensionAddfoxRsbuild

      전방위 브라우저 지원

      주요 Chromium 기반 브라우저와 Firefox를 지원합니다. 추가 설정 없이 브라우저 기본 설치 경로를 자동으로 인식하고 시작합니다.

      ChromeFirefoxOperaBrave
      VivaldiArcYandexChromium

      프레임워크에 구애받지 않음

      Vanilla JS를 사용하거나 Vue, React, Preact, Svelte, Solid 또는 React+UnoCSS 등의 프레임워크를 사용할 수 있습니다.

      VueReactPreactSvelteSolid
      TypeScriptJavaScript

      content-ui 지원

      Iframe, ShadowDom 및 네이티브 콘텐츠를 쉽게 통합할 수 있는 내장 createContentUI 메서드를 제공합니다.

      https://example.com/article
      Translate
      Original
      Selected text...
      Translation
      Translated result
      EN → ZH

      Rstack 생태계

      Rsdoctor 및 Rstest 지원이 내장되어 있어 패키징 분석 및 단위, e2e 테스트를 빠르게 완료할 수 있습니다.

      Zip 출력 지원

      빌드 시 자동으로 확장 프로그램 zip 패키지를 출력하여 설치 및 배포가 용이합니다.

      AI를 위해

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

      llms.txt 및 마크다운 메타정보 지원

      AI agent 개발을 돕기 위해 명확한 플러그인 정보, 오류 정보 및 prompts를 제공합니다.

      AIllms.txtMmeta.md!error.mdAI Agent

      AI 친화적인 오류 모니터링

      --debug 사용 시 터미널 오류 출력을 활성화합니다. 브라우저 조작 없이 모든 오류 정보를 파악하여 Editor에서 바로 Ask AI할 수 있습니다.

      bash
      $ addfox dev --debug
      error
      --- BEGIN AI PROMPT ---
      You are a frontend and browser extension development expert, proficient with the Addfox framework.
      This is an Addfox-based browser extension runtime error (MV3).
      Before proposing fixes:
      1) Read `.addfox/llms.txt` first.
      2) Apply the `addfox-debugging` skills to analyze this report (and `.addfox/error.md` / `.addfox/meta.md` if available).
      --- END AI PROMPT ---
      --- Addfox extension error ---
      bundler: rsbuild
      front-end-framework: React
      entry: content
      type: error
      time: 2026/3/21 20:58:51
      message: fff is not defined
      location: chrome-extension://fbnnalickbkocmeokpogajmocmcejemg/content/index.js:2966:1
      stack:
      ReferenceError: fff is not defined
      at ./app/content/index.ts (chrome-extension://fbnnalickbkocmeokpogajmocmcejemg/content/index.js:1635:45)
      at __webpack_require__ (chrome-extension://fbnnalickbkocmeokpogajmocmcejemg/content/index.js:2962:29)
      at chrome-extension://fbnnalickbkocmeokpogajmocmcejemg/content/index.js:4125:27
      at chrome-extension://fbnnalickbkocmeokpogajmocmcejemg/content/index.js:4126:3
      ---------------------------
      --- BEGIN AI PROMPT ---
      You are a frontend and browser extension development expert, proficient with the Addfox framework.
      This is an Addfox-based browser extension runtime error (MV3).
      Before proposing fixes:
      1) Read `.addfox/llms.txt` first.
      2) Apply the `addfox-debugging` skills to analyze this report (and `.addfox/error.md` / `.addfox/meta.md` if available).
      --- END AI PROMPT ---
      --- Addfox extension error ---
      bundler: rsbuild
      front-end-framework: React
      entry: content
      type: error
      time: 2026/3/21 20:58:51
      message: fff is not defined
      location: chrome-extension://fbnnalickbkocmeokpogajmocmcejemg/content/index.js:2966:1
      stack:
      ReferenceError: fff is not defined
      at ./app/content/index.ts (chrome-extension://fbnnalickbkocmeokpogajmocmcejemg/content/index.js:1635:45)
      at __webpack_require__ (chrome-extension://fbnnalickbkocmeokpogajmocmcejemg/content/index.js:2962:29)
      at chrome-extension://fbnnalickbkocmeokpogajmocmcejemg/content/index.js:4125:27
      at chrome-extension://fbnnalickbkocmeokpogajmocmcejemg/content/index.js:4126:3
      ---------------------------

      Skills 지원

      확장 가능한 Skills로 Agent 및 자동화를 지원합니다.

      migrate-to-addfox
      addfox-best-practices
      extension-functions-best-practices
      addfox-debugging
      addfox-testing
      migrate-to-addfox
      addfox-best-practices
      extension-functions-best-practices
      addfox-debugging
      addfox-testing
      migrate-to-addfox
      addfox-best-practices
      extension-functions-best-practices
      addfox-debugging
      addfox-testing
      migrate-to-addfox
      addfox-best-practices
      extension-functions-best-practices
      addfox-debugging
      addfox-testing
      addfox-debugging
      addfox-testing
      addfox-best-practices
      migrate-to-addfox
      extension-functions-best-practices
      addfox-debugging
      addfox-testing
      addfox-best-practices
      migrate-to-addfox
      extension-functions-best-practices
      addfox-debugging
      addfox-testing
      addfox-best-practices
      migrate-to-addfox
      extension-functions-best-practices
      addfox-debugging
      addfox-testing
      addfox-best-practices
      migrate-to-addfox
      extension-functions-best-practices

      제작자의 말

      "
      Gomi
      Gomi
      Creator of VideoRoll and AddFox
      저는 Gomi이며, 브라우저 확장 프로그램 Video Roll의 제작자이기도 합니다. Chrome Web Store와 Edge에서 모두 추천 확장 프로그램이 되고 사용자 수가 35K를 넘어섰음에도 불구하고, 브라우저 확장 프로그램 개발 과정에서 여전히 불만족스러움을 느꼈습니다. Parcel, Vite 등의 개발 도구를 시도한 후, 확장 프로그램 개발의 몇 가지 고통스러운 지점을 해결해 보기로 결심했습니다. 업계에 이미 WXT, Plasmo와 같이 매우 우수하고 완성도 높은 솔루션이 존재함에도 불구하고, 저는 절대 바퀴를 다시 만들지 않을 것을 굳게 결심했습니다. Rsbuild의 속도와 AI 친화적인 개발 패러다임에 매료되어 Addfox를 창조하게 되었습니다.

      자주 묻는 질문

      Addfox에 관한 자주 묻는 질문에 대한 빠른 답변

      네, Addfox는 MIT 라이선스로 완전히 오픈 소스입니다. GitHub에서 소스 코드를 확인하고, 프로젝트에 기여하거나, 필요에 따라 Fork할 수 있습니다.
      현재 Addfox는 Chromium 기반 브라우저(Chrome, Edge, Arc, Brave 등)와 Firefox에 집중하고 있습니다. Safari의 확장 프로그램 API 및 패키징 요구사항이 다르기 때문에, 현재로서는 Safari를 지원하지 않습니다.
      물론입니다! Addfox는 프레임워크에 구애받지 않으며, React, Vue, Preact, Svelte, Solid 및 네이티브 JavaScript/TypeScript를 지원합니다. 선호하는 프레임워크를 사용할 수 있으며, 최소한의 설정만 필요합니다.
      WXT, Plasmo, Extension.js는 모두 우수한 프레임워크로, 브라우저 확장 프로그램 개발 생태계를 크게 발전시켰습니다. WXT는 Vite의 강력한 성능과 세심하게 설계된 플러그인 시스템을 가져왔습니다. Plasmo는 완벽한 클라우드 서비스 통합과 뛰어난 개발 경험을 제공합니다. Extension.js는 간결하고 사용하기 쉬운 것으로 유명합니다. Addfox는 다른 길을 선택했습니다: Rsbuild를 기반으로 극한의 빌드 속도를 얻습니다. AI 보조 개발을 위해 설계되어 구조화된 메타데이터와 터미널 오류 출력을 제공합니다. 최소한의 규칙을 통해 최대한의 유연성을 제공합니다—원하는 방식으로 코드를 구성하면서도 즉시 사용 가능한 핫 업데이트와 다중 브라우저 지원을 누릴 수 있습니다.