AddFox
  • Русский

      • Примеры

      На этой странице перечислены примеры расширений из репозитория 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-shadcnReact + shadcn/ui: пять entry (popup, options, content, background, sidepanel), 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Версия Content UI на React.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Пример объявления entry через поля manifest.examples/addfox-with-manifest-entries
      addfox-with-react-entry-falseПример React с entry: false (Rsbuild самостоятельно управляет entry).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 фреймворк может автоматически открыть браузер и загрузить расширение.