AddFox
  • 简体中文

      • 浏览器启动

      Addfox 可以在开发时自动启动浏览器并加载扩展，提升开发效率。

      快速开始

      运行开发命令：

      pnpm
      npm
      yarn
      bun
      pnpm dev

      首次启动开发服务器会自动：

      1. 构建扩展
      2. 打开浏览器
      3. 加载开发中的扩展

      使用 Scripts 启动（推荐）

      在 package.json 中配置 scripts，可以更简洁地启动不同浏览器：

      {
  "scripts": {
    "dev": "addfox dev",
    "dev:chrome": "addfox dev -b chrome",
    "dev:edge": "addfox dev -b edge",
    "dev:brave": "addfox dev -b brave",
    "dev:firefox": "addfox dev -b firefox"
  }
}

      配置后直接使用：

      pnpm
      npm
      yarn
      bun
      # Chrome（默认）
pnpm dev

# 其他浏览器
pnpm dev:edge
pnpm dev:firefox

      Chromium 系浏览器

      Addfox 原生支持以下基于 Chromium 的浏览器：

      浏览器CLI 参数说明
      Google Chrome-b chrome默认浏览器
      Chromium-b chromium开源版本
      Microsoft Edge-b edgeWindows 自带
      Brave-b brave隐私浏览器
      Vivaldi-b vivaldi自定义浏览器
      Opera-b opera欧朋浏览器
      Santa-b santaSanta 浏览器
      Arc-b arc新形态浏览器
      Yandex-b yandexYandex 浏览器
      BrowserOS-b browserosBrowserOS
      Custom-b custom自定义浏览器（需配置 browser.custom）

      直接通过 CLI 启动

      如果不使用 scripts，也可以通过 CLI 直接指定浏览器：

      pnpm
      npm
      yarn
      bun
      # Chrome（默认）
pnpm addfox dev

# 其他浏览器
pnpm addfox dev -b edge
pnpm addfox dev -b brave
pnpm addfox dev -b vivaldi

      Chromium 浏览器路径配置

      如果浏览器不在默认位置，可在配置中指定 browserPath：

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

      各平台示例

      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 缓存用户数据

      默认每次启动使用新的用户数据目录。如需保留（如保持登录状态），在 package.json 中添加：

      {
  "scripts": {
    "dev:cache": "addfox dev -b chrome --cache",
    "dev:edge:cache": "addfox dev -b edge --cache"
  }
}

      或通过 CLI 直接运行：

      pnpm
      npm
      yarn
      bun
      pnpm addfox dev --cache
# 或
pnpm addfox dev -c

      或在配置中启用：

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

      用户数据保存在 .addfox/cache/ 目录。

      Firefox

      Firefox 开发模式使用 web-ext 工具管理扩展生命周期。

      启动 Firefox

      使用配置好的 script：

      pnpm dev:firefox

      或通过 CLI 直接运行：

      pnpm
      npm
      yarn
      bun
      pnpm addfox dev -b firefox

      Firefox 特性

      • 扩展重载由 web-ext 处理，而非 Addfox 的 WebSocket
      • 自动打开 Firefox 并加载扩展
      • 支持文件变更时自动重新加载

      Firefox 路径配置

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

      Firefox 配置文件由 web-ext 自动管理，无需手动配置缓存选项。

      调试技巧

      查看 Service Worker

      1. 打开 chrome://extensions/
      2. 找到开发中的扩展
      3. 点击 "Service Worker" 查看后台脚本控制台

      查看 Content Script

      1. 在网页上右键 → 检查
      2. 切换到 Console 面板
      3. 选择对应扩展的上下文

      使用错误监控

      在 package.json 中添加 debug script：

      {
  "scripts": {
    "dev:debug": "addfox dev --debug",
    "dev:firefox:debug": "addfox dev -b firefox --debug"
  }
}

      然后运行：

      pnpm dev:debug

      或通过 CLI 直接启用：

      pnpm
      npm
      yarn
      bun
      pnpm addfox dev --debug

      相关配置