#Browser Launch

Addfox can automatically launch the browser and load the extension during development for improved efficiency.

#Quick Start

Run the dev command:

pnpm

npm

yarn

bun

pnpm dev

npm run dev

yarn dev

bun run dev

On first start, the dev server will automatically:

1. Build the extension
2. Launch the browser
3. Load the development extension

#Chromium-based Browsers

Addfox natively supports the following Chromium-based browsers:

#Launch Chromium Browsers

pnpm

npm

yarn

bun

# Chrome (default)
pnpm dev -- -b chrome

# Edge
pnpm dev -- -b edge

# Brave
pnpm dev -- -b brave

# Chrome (default)
npm run dev -- -b chrome

# Edge
npm run dev -- -b edge

# Brave
npm run dev -- -b brave

# Chrome (default)
yarn dev -b chrome

# Edge
yarn dev -b edge

# Brave
yarn dev -b brave

# Chrome (default)
bun run dev -- -b chrome

# Edge
bun run dev -- -b edge

# Brave
bun run dev -- -b brave

#Chromium Browser Path Configuration

If the browser is not in the default location, specify browserPath in config:

// addfox.config.ts
export default defineConfig({
  browserPath: {
    chrome: "/path/to/chrome",
    edge: "/path/to/edge",
    brave: "/path/to/brave",
  },
});

#Platform Examples

macOS:

export default defineConfig({
  browserPath: {
    chrome: "/Applications/Google Chrome.app/Contents/MacOS/Google Chrome",
    edge: "/Applications/Microsoft Edge.app/Contents/MacOS/Microsoft Edge",
  },
});

Windows:

export default defineConfig({
  browserPath: {
    chrome: "C:\\Program Files\\Google\\Chrome\\Application\\chrome.exe",
    edge: "C:\\Program Files (x86)\\Microsoft\\Edge\\Application\\msedge.exe",
  },
});

Linux:

export default defineConfig({
  browserPath: {
    chrome: "/usr/bin/google-chrome",
    chromium: "/usr/bin/chromium-browser",
  },
});

#Chromium User Data Cache

By default, a new user data directory is used on each start. To preserve data (e.g., stay logged in):

pnpm

npm

yarn

bun

pnpm dev -- -c
# or
pnpm dev -- --cache

npm run dev -- -c
# or
npm run dev -- --cache

yarn dev -c
# or
yarn dev --cache

bun run dev -- -c
# or
bun run dev -- --cache

Or enable in config:

export default defineConfig({
  cache: true,
});

User data is saved in .addfox/cache/ directory.

#Firefox

Firefox dev mode uses the web-ext tool to manage extension lifecycle.

#Launch Firefox

pnpm

npm

yarn

bun

pnpm dev -- -b firefox

npm run dev -- -b firefox

yarn dev -b firefox

bun run dev -- -b firefox

#Firefox Features

• Extension reload is handled by web-ext, not Addfox's WebSocket
• Automatically opens Firefox and loads the extension
• Supports auto-reload on file changes

#Firefox Path Configuration

export default defineConfig({
  browserPath: {
    firefox: "/Applications/Firefox.app/Contents/MacOS/firefox",
  },
});

#Debugging Tips

#View Service Worker

1. Open chrome://extensions/
2. Find the extension under development
3. Click "Service Worker" to view background script console

#View Content Script

1. Right-click on the webpage → Inspect
2. Switch to Console panel
3. Select the extension's context

#Use Error Monitor

Enable monitoring panel to capture errors from all entries:

pnpm

npm

yarn

bun

pnpm dev -- --debug

npm run dev -- --debug

yarn dev --debug

bun run dev -- --debug

#Related Configuration

• browserPath - Browser executable path configuration
• cache - Cache configuration
• hotReload - Hot reload configuration
• debug - Error monitoring configuration