AddFox
  • 日本語

      • サンプル

      このページでは、addfox リポジトリの拡張機能サンプルを一覧表示します。各サンプルは独立したディレクトリで、package.json と addfox.config.ts を含みます。リポジトリのルートで pnpm / npm / yarn / bun を使用して依存関係をインストールした後、対応するサンプルディレクトリで dev または build を実行して、実行またはビルドできます。

      サンプル説明リポジトリリンク
      addfox-with-vueVue 3 テンプレート：popup、options、content、background。簡単なメッセージ通信を含む。examples/addfox-with-vue
      addfox-with-reactReact テンプレート：popup、options、content、background。簡単なメッセージ通信を含む。examples/addfox-with-react
      addfox-with-preactPreact テンプレート：popup、options、content、background。簡単なメッセージ通信を含む。examples/addfox-with-preact
      addfox-with-svelteSvelte テンプレート：popup、options、content、background。簡単なメッセージ通信を含む。examples/addfox-with-svelte
      addfox-with-solidSolid テンプレート：popup、options、content、background。簡単なメッセージ通信を含む。examples/addfox-with-solid
      addfox-with-react-shadcnReact + shadcn/ui：popup、options、content、background、sidepanel の5エントリー。Tailwind + コンポーネントライブラリ。examples/addfox-with-react-shadcn
      addfox-with-devtools純粋な TypeScript：background + devtools_page のみ。React/Vue なし。DevTools 拡張機能をデモ。examples/addfox-with-devtools
      addfox-with-content-uiContent UI サンプル：ページへの拡張機能 UI のマウントをデモ。examples/addfox-with-content-ui
      addfox-with-content-ui-reactReact 版 Content UI サンプル。examples/addfox-with-content-ui-react
      addfox-with-tailwindcssTailwind CSS 統合サンプル。examples/addfox-with-tailwindcss
      addfox-with-unoUnoCSS 統合サンプル。examples/addfox-with-uno
      addfox-with-vue-tsxVue + TSX サンプル。examples/addfox-with-vue-tsx
      addfox-with-firefoxFirefox ターゲットビルドと実行サンプル。examples/addfox-with-firefox
      addfox-with-mv2Manifest V2 互換サンプル（移行/比較用）。examples/addfox-with-mv2
      addfox-with-manifest-entriesmanifest フィールドでエントリーを宣言するサンプル。examples/addfox-with-manifest-entries
      addfox-with-react-entry-falseentry: false シナリオ（rsbuild がエントリーを自己管理）の 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-rstestRstest ユニットテスト統合サンプル。examples/addfox-with-rstest
      addfox-with-rstest-e2eRstest + 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 を使用する場合、フレームワークは自動的にブラウザを開いて拡張機能を読み込みます。