AddFox
  • English

      • Examples

      This page lists extension examples in the addfox repo. Each example is a separate directory with its own package.json and addfox.config.ts. Run install in the repo root (pnpm / npm / yarn / bun), then run dev or build in the example directory.

      ExampleDescriptionRepo link
      addfox-with-vueVue 3 template: popup, options, content, background with simple messaging.examples/addfox-with-vue
      addfox-with-reactReact template: popup, options, content, background with simple messaging.examples/addfox-with-react
      addfox-with-preactPreact template: popup, options, content, background with simple messaging.examples/addfox-with-preact
      addfox-with-svelteSvelte template: popup, options, content, background with simple messaging.examples/addfox-with-svelte
      addfox-with-solidSolid template: popup, options, content, background with simple messaging.examples/addfox-with-solid
      addfox-with-react-shadcnReact + shadcn/ui: popup, options, content, background, sidepanel; Tailwind + component library.examples/addfox-with-react-shadcn
      addfox-with-devtoolsPlain TypeScript: background + devtools_page only, no React/Vue; demonstrates a DevTools extension.examples/addfox-with-devtools
      addfox-with-content-uiContent UI example for mounting extension UI on web pages.examples/addfox-with-content-ui
      addfox-with-content-ui-reactReact-based Content UI example.examples/addfox-with-content-ui-react
      addfox-with-tailwindcssTailwind CSS integration example.examples/addfox-with-tailwindcss
      addfox-with-unoUnoCSS integration example.examples/addfox-with-uno
      addfox-with-vue-tsxVue + TSX example.examples/addfox-with-vue-tsx
      addfox-with-firefoxFirefox target build and run example.examples/addfox-with-firefox
      addfox-with-mv2Manifest V2 compatibility example (migration/contrast use).examples/addfox-with-mv2
      addfox-with-manifest-entriesExample using manifest-based entry declarations.examples/addfox-with-manifest-entries
      addfox-with-react-entry-falseReact example for entry: false (entry managed by rsbuild).examples/addfox-with-react-entry-false
      addfox-with-single-fileSingle-file/minimal structure example.examples/addfox-with-single-file
      addfox-with-sandboxSandbox page example.examples/addfox-with-sandbox
      addfox-with-newtab-overrideNew Tab page override example.examples/addfox-with-newtab-override
      addfox-with-history-overrideHistory page override example.examples/addfox-with-history-override
      addfox-with-bookmarks-overrideBookmarks page override example.examples/addfox-with-bookmarks-override
      addfox-with-rstestRstest unit testing integration example.examples/addfox-with-rstest
      addfox-with-rstest-e2eRstest + E2E testing example.examples/addfox-with-rstest-e2e
      addfox-with-env-varsEnv variable injection and scoping example (ADDFOX_PUBLIC_ + private vars).examples/addfox-with-env-vars

      How to run

      From the addfox repo root, run install, then go to an example directory:

      pnpm
      npm
      yarn
      bun
      pnpm install
cd examples/addfox-with-vue   # or another example
pnpm dev                   # dev mode
pnpm build                 # build

      Output goes to .addfox/extension (or the example's outputRoot/outDir). Load that directory in the browser; with dev mode, the framework can open the browser and load the extension automatically.